<!DOCTYPE html><html lang="zh-Hans"><head><meta charset="utf-8"><title>Angular - 部署</title><meta name="Description" content="Angular is a platform for building mobile and desktop web applications.
    Join the community of millions of developers who build compelling user interfaces with Angular."><base href="/"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="search" type="application/opensearchdescription+xml" href="assets/opensearch.xml"><link rel="icon" type="image/x-icon" href="assets/images/favicons/favicon.ico"><link rel="icon" type="image/png" href="assets/images/favicons/favicon-32x32.png" sizes="32x32"><link rel="icon" type="image/png" href="assets/images/favicons/favicon-194x194.png" sizes="194x194"><link rel="icon" type="image/png" href="assets/images/favicons/favicon-96x96.png" sizes="96x96"><link rel="icon" type="image/png" href="assets/images/favicons/favicon-16x16.png" sizes="16x16"><link rel="apple-touch-icon" sizes="144x144" href="assets/images/favicons/favicon-144x144.png"><link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/images/favicons/favicon-144x144.png"><link href="assets/fonts/Material_Icons.css" rel="stylesheet"><link href="assets/fonts/Droid_Sans_Mono.css" rel="stylesheet"><link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"><link rel="manifest" href="pwa-manifest.json"><meta name="theme-color" content="#1976d2"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="translucent"><script async="" src="assets/js/analytics.js"></script><script>!function(e,a,n,t,s,c,g){e.GoogleAnalyticsObject=s,e.ga=e.ga||function(){(e.ga.q=e.ga.q||[]).push(arguments)},e.ga.l=1*new Date,c=a.createElement(n),g=a.getElementsByTagName(n)[0],c.async=1,c.src="assets/js/analytics.js",~e.name.indexOf("NG_DEFER_BOOTSTRAP")||g.parentNode.insertBefore(c,g)}(window,document,"script",0,"ga")</script><script>window.onerror=function(){ga("send","exception",{exDescription:function(e,r,n,a,c){var l;e=e.replace(/^Error: /,""),l=c?c.stack.replace(/^Error: /,"").replace(e+"\n","").replace(/^ +/gm,"").replace(/^at /gm,"").replace(/(?: \(|@)http.+\/([^/)]+)\)?(?:\n|$)/gm,"@$1\n").replace(/ *\(eval code(:\d+:\d+)\)(?:\n|$)/gm,"@???$1\n"):r+":"+(n=n||"?")+":"+(a=a||"?");return(e+"\n"+l).substr(0,150)}.apply(null,arguments),exFatal:!0})}</script><link rel="stylesheet" href="styles.4adbe52ad34df01b5273.css"><style>.cdk-high-contrast-active .mat-toolbar{outline:solid 1px}.mat-toolbar-row,.mat-toolbar-single-row{display:flex;box-sizing:border-box;padding:0 16px;width:100%;flex-direction:row;align-items:center;white-space:nowrap}.mat-toolbar-multiple-rows{display:flex;box-sizing:border-box;flex-direction:column;width:100%}.mat-toolbar-multiple-rows{min-height:64px}.mat-toolbar-row,.mat-toolbar-single-row{height:64px}@media(max-width:599px){.mat-toolbar-multiple-rows{min-height:56px}.mat-toolbar-row,.mat-toolbar-single-row{height:56px}}</style><style>.mat-icon{background-repeat:no-repeat;display:inline-block;fill:currentColor;height:24px;width:24px}.mat-icon.mat-icon-inline{font-size:inherit;height:inherit;line-height:inherit;width:inherit}[dir=rtl] .mat-icon-rtl-mirror{transform:scale(-1,1)}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon{display:block}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button .mat-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button .mat-icon{margin:auto}</style><style>.mat-button .mat-button-focus-overlay,.mat-icon-button .mat-button-focus-overlay{opacity:0}.mat-button:hover .mat-button-focus-overlay,.mat-stroked-button:hover .mat-button-focus-overlay{opacity:.04}@media(hover:none){.mat-button:hover .mat-button-focus-overlay,.mat-stroked-button:hover .mat-button-focus-overlay{opacity:0}}.mat-button,.mat-flat-button,.mat-icon-button,.mat-stroked-button{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible}.mat-button::-moz-focus-inner,.mat-flat-button::-moz-focus-inner,.mat-icon-button::-moz-focus-inner,.mat-stroked-button::-moz-focus-inner{border:0}.mat-button[disabled],.mat-flat-button[disabled],.mat-icon-button[disabled],.mat-stroked-button[disabled]{cursor:default}.mat-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-button.cdk-program-focused .mat-button-focus-overlay,.mat-flat-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-flat-button.cdk-program-focused .mat-button-focus-overlay,.mat-icon-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-icon-button.cdk-program-focused .mat-button-focus-overlay,.mat-stroked-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-stroked-button.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-button::-moz-focus-inner,.mat-flat-button::-moz-focus-inner,.mat-icon-button::-moz-focus-inner,.mat-stroked-button::-moz-focus-inner{border:0}.mat-raised-button{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible;transform:translate3d(0,0,0);transition:background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1)}.mat-raised-button::-moz-focus-inner{border:0}.mat-raised-button[disabled]{cursor:default}.mat-raised-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-raised-button.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-raised-button::-moz-focus-inner{border:0}._mat-animation-noopable.mat-raised-button{transition:none;animation:none}.mat-stroked-button{border:1px solid currentColor;padding:0 15px;line-height:34px}.mat-stroked-button .mat-button-focus-overlay,.mat-stroked-button .mat-button-ripple.mat-ripple{top:-1px;left:-1px;right:-1px;bottom:-1px}.mat-fab{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible;transform:translate3d(0,0,0);transition:background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1);min-width:0;border-radius:50%;width:56px;height:56px;padding:0;flex-shrink:0}.mat-fab::-moz-focus-inner{border:0}.mat-fab[disabled]{cursor:default}.mat-fab.cdk-keyboard-focused .mat-button-focus-overlay,.mat-fab.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-fab::-moz-focus-inner{border:0}._mat-animation-noopable.mat-fab{transition:none;animation:none}.mat-fab .mat-button-wrapper{padding:16px 0;display:inline-block;line-height:24px}.mat-mini-fab{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible;transform:translate3d(0,0,0);transition:background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1);min-width:0;border-radius:50%;width:40px;height:40px;padding:0;flex-shrink:0}.mat-mini-fab::-moz-focus-inner{border:0}.mat-mini-fab[disabled]{cursor:default}.mat-mini-fab.cdk-keyboard-focused .mat-button-focus-overlay,.mat-mini-fab.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-mini-fab::-moz-focus-inner{border:0}._mat-animation-noopable.mat-mini-fab{transition:none;animation:none}.mat-mini-fab .mat-button-wrapper{padding:8px 0;display:inline-block;line-height:24px}.mat-icon-button{padding:0;min-width:0;width:40px;height:40px;flex-shrink:0;line-height:40px;border-radius:50%}.mat-icon-button .mat-icon,.mat-icon-button i{line-height:24px}.mat-button-focus-overlay,.mat-button-ripple.mat-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.mat-button-ripple.mat-ripple:not(:empty){transform:translateZ(0)}.mat-button-focus-overlay{opacity:0;transition:opacity .2s cubic-bezier(.35,0,.25,1),background-color .2s cubic-bezier(.35,0,.25,1)}._mat-animation-noopable .mat-button-focus-overlay{transition:none}.cdk-high-contrast-active .mat-button-focus-overlay{background-color:#fff}.cdk-high-contrast-black-on-white .mat-button-focus-overlay{background-color:#000}.mat-button-ripple-round{border-radius:50%;z-index:1}.mat-button .mat-button-wrapper>*,.mat-fab .mat-button-wrapper>*,.mat-flat-button .mat-button-wrapper>*,.mat-icon-button .mat-button-wrapper>*,.mat-mini-fab .mat-button-wrapper>*,.mat-raised-button .mat-button-wrapper>*,.mat-stroked-button .mat-button-wrapper>*{vertical-align:middle}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button{display:block;font-size:inherit;width:2.5em;height:2.5em}.cdk-high-contrast-active .mat-button,.cdk-high-contrast-active .mat-fab,.cdk-high-contrast-active .mat-flat-button,.cdk-high-contrast-active .mat-icon-button,.cdk-high-contrast-active .mat-mini-fab,.cdk-high-contrast-active .mat-raised-button{outline:solid 1px}</style><style>.mat-drawer-container{position:relative;z-index:1;box-sizing:border-box;-webkit-overflow-scrolling:touch;display:block;overflow:hidden}.mat-drawer-container[fullscreen]{top:0;left:0;right:0;bottom:0;position:absolute}.mat-drawer-container[fullscreen].mat-drawer-container-has-open{overflow:hidden}.mat-drawer-container.mat-drawer-container-explicit-backdrop .mat-drawer-side{z-index:3}.mat-drawer-container.ng-animate-disabled .mat-drawer-backdrop,.mat-drawer-container.ng-animate-disabled .mat-drawer-content,.ng-animate-disabled .mat-drawer-container .mat-drawer-backdrop,.ng-animate-disabled .mat-drawer-container .mat-drawer-content{transition:none}.mat-drawer-backdrop{top:0;left:0;right:0;bottom:0;position:absolute;display:block;z-index:3;visibility:hidden}.mat-drawer-backdrop.mat-drawer-shown{visibility:visible}.mat-drawer-transition .mat-drawer-backdrop{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:background-color,visibility}.cdk-high-contrast-active .mat-drawer-backdrop{opacity:.5}.mat-drawer-content{position:relative;z-index:1;display:block;height:100%;overflow:auto}.mat-drawer-transition .mat-drawer-content{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:transform,margin-left,margin-right}.mat-drawer{position:relative;z-index:4;display:block;position:absolute;top:0;bottom:0;z-index:3;outline:0;box-sizing:border-box;overflow-y:auto;transform:translate3d(-100%,0,0)}.cdk-high-contrast-active .mat-drawer,.cdk-high-contrast-active [dir=rtl] .mat-drawer.mat-drawer-end{border-right:solid 1px currentColor}.cdk-high-contrast-active .mat-drawer.mat-drawer-end,.cdk-high-contrast-active [dir=rtl] .mat-drawer{border-left:solid 1px currentColor;border-right:none}.mat-drawer.mat-drawer-side{z-index:2}.mat-drawer.mat-drawer-end{right:0;transform:translate3d(100%,0,0)}[dir=rtl] .mat-drawer{transform:translate3d(100%,0,0)}[dir=rtl] .mat-drawer.mat-drawer-end{left:0;right:auto;transform:translate3d(-100%,0,0)}.mat-drawer-inner-container{width:100%;height:100%;overflow:auto;-webkit-overflow-scrolling:touch}.mat-sidenav-fixed{position:fixed}</style><style>.nav-link.highlight[_ngcontent-ng-docs-c30]{color:#ff0}</style><style>.mat-progress-bar{display:block;height:4px;overflow:hidden;position:relative;transition:opacity 250ms linear;width:100%}._mat-animation-noopable.mat-progress-bar{transition:none;animation:none}.mat-progress-bar .mat-progress-bar-element,.mat-progress-bar .mat-progress-bar-fill::after{height:100%;position:absolute;width:100%}.mat-progress-bar .mat-progress-bar-background{width:calc(100% + 10px)}.cdk-high-contrast-active .mat-progress-bar .mat-progress-bar-background{display:none}.mat-progress-bar .mat-progress-bar-buffer{transform-origin:top left;transition:transform 250ms ease}.cdk-high-contrast-active .mat-progress-bar .mat-progress-bar-buffer{border-top:solid 5px;opacity:.5}.mat-progress-bar .mat-progress-bar-secondary{display:none}.mat-progress-bar .mat-progress-bar-fill{animation:none;transform-origin:top left;transition:transform 250ms ease}.cdk-high-contrast-active .mat-progress-bar .mat-progress-bar-fill{border-top:solid 4px}.mat-progress-bar .mat-progress-bar-fill::after{animation:none;content:"";display:inline-block;left:0}.mat-progress-bar[dir=rtl],[dir=rtl] .mat-progress-bar{transform:rotateY(180deg)}.mat-progress-bar[mode=query]{transform:rotateZ(180deg)}.mat-progress-bar[mode=query][dir=rtl],[dir=rtl] .mat-progress-bar[mode=query]{transform:rotateZ(180deg) rotateY(180deg)}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-fill,.mat-progress-bar[mode=query] .mat-progress-bar-fill{transition:none}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-primary,.mat-progress-bar[mode=query] .mat-progress-bar-primary{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-primary-indeterminate-translate 2s infinite linear;left:-145.166611%}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-primary.mat-progress-bar-fill::after,.mat-progress-bar[mode=query] .mat-progress-bar-primary.mat-progress-bar-fill::after{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-primary-indeterminate-scale 2s infinite linear}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-secondary,.mat-progress-bar[mode=query] .mat-progress-bar-secondary{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-secondary-indeterminate-translate 2s infinite linear;left:-54.888891%;display:block}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-secondary.mat-progress-bar-fill::after,.mat-progress-bar[mode=query] .mat-progress-bar-secondary.mat-progress-bar-fill::after{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-secondary-indeterminate-scale 2s infinite linear}.mat-progress-bar[mode=buffer] .mat-progress-bar-background{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-background-scroll 250ms infinite linear;display:block}.mat-progress-bar._mat-animation-noopable .mat-progress-bar-background,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-buffer,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-fill,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-fill::after,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-primary,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-primary.mat-progress-bar-fill::after,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-secondary,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-secondary.mat-progress-bar-fill::after{animation:none;transition:none}@keyframes mat-progress-bar-primary-indeterminate-translate{0%{transform:translateX(0)}20%{animation-timing-function:cubic-bezier(.5,0,.701732,.495819);transform:translateX(0)}59.15%{animation-timing-function:cubic-bezier(.302435,.381352,.55,.956352);transform:translateX(83.67142%)}100%{transform:translateX(200.611057%)}}@keyframes mat-progress-bar-primary-indeterminate-scale{0%{transform:scaleX(.08)}36.65%{animation-timing-function:cubic-bezier(.334731,.12482,.785844,1);transform:scaleX(.08)}69.15%{animation-timing-function:cubic-bezier(.06,.11,.6,1);transform:scaleX(.661479)}100%{transform:scaleX(.08)}}@keyframes mat-progress-bar-secondary-indeterminate-translate{0%{animation-timing-function:cubic-bezier(.15,0,.515058,.409685);transform:translateX(0)}25%{animation-timing-function:cubic-bezier(.31033,.284058,.8,.733712);transform:translateX(37.651913%)}48.35%{animation-timing-function:cubic-bezier(.4,.627035,.6,.902026);transform:translateX(84.386165%)}100%{transform:translateX(160.277782%)}}@keyframes mat-progress-bar-secondary-indeterminate-scale{0%{animation-timing-function:cubic-bezier(.15,0,.515058,.409685);transform:scaleX(.08)}19.15%{animation-timing-function:cubic-bezier(.31033,.284058,.8,.733712);transform:scaleX(.457104)}44.15%{animation-timing-function:cubic-bezier(.4,.627035,.6,.902026);transform:scaleX(.72796)}100%{transform:scaleX(.08)}}@keyframes mat-progress-bar-background-scroll{to{transform:translateX(-8px)}}</style><script charset="utf-8" src="toc-toc-module-es2015.f8531f591ee147aebcc6.js"></script><script charset="utf-8" src="default~code-code-example-module~code-code-tabs-module-es2015.9efcc76d2979a2e605e0.js"></script><script charset="utf-8" src="code-code-example-module-es2015.fa05e6f700453813d256.js"></script><script charset="utf-8" src="assets-js-prettify-js-es2015.ba856648f2dd2d930a9b.js"></script></head><body><aio-shell ng-version="9.0.0-rc.11" class="aio-notification-hide folder-guide mode-stable page-guide-deployment sidenav-open view-SideNav"><div id="top-of-page"></div><mat-toolbar color="primary" class="mat-toolbar app-toolbar no-print mat-primary mat-toolbar-multiple-rows"><mat-toolbar-row class="mat-toolbar-row notification-container"><aio-notification notificationid="survey-february-2019" expirationdate="2019-03-01" class="ng-tns-c22-0 ng-trigger ng-trigger-hideAnimation" style="height:0"><span class="content ng-tns-c22-0"><a href="http://bit.ly/angular-survey-2019" target="_blank" class="ng-tns-c22-0"><mat-icon role="img" svgicon="insert_comment" aria-label="Announcement" class="mat-icon notranslate icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></mat-icon><span class="message"><b>填写这份《一分钟调查》</b>，帮我们（开发组）做得更好！</span><span class="action-button">去填写</span></a></span><button mat-icon-button="" aria-label="Close" class="close-button ng-tns-c22-0 mat-icon-button mat-button-base"><span class="mat-button-wrapper"><mat-icon role="img" svgicon="close" aria-label="Dismiss notification" class="mat-icon notranslate mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></mat-icon></span><div matripple="" class="mat-ripple mat-button-ripple mat-button-ripple-round"></div><div class="mat-button-focus-overlay"></div></button></aio-notification></mat-toolbar-row><mat-toolbar-row class="mat-toolbar-row"><button mat-button="" title="Docs menu" class="hamburger mat-button mat-button-base"><span class="mat-button-wrapper"><mat-icon role="img" svgicon="menu" class="mat-icon notranslate mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></svg></mat-icon></span><div matripple="" class="mat-ripple mat-button-ripple"></div><div class="mat-button-focus-overlay"></div></button><a href="/" class="nav-link home"><img src="assets/images/logos/angular/logo-nav@2x.png" width="150" height="40" title="Home" alt="Home" class="ng-star-inserted"></a><aio-top-menu _nghost-ng-docs-c30="" class="ng-star-inserted"><ul _ngcontent-ng-docs-c30="" role="navigation"><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="features" title="特性" target="_self"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">特性</span></a></li><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="docs" title="文档" target="_self"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">文档</span></a></li><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="resources" title="资源" target="_self"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">资源</span></a></li><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="events" title="会议" target="_self"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">会议</span></a></li><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="https://blog.wangke.io/" title="译者汪志成的博客，包括翻译文章和原创文章" target="_blank"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">译者博客</span></a></li><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="translations/cn/home" title="关于中文版" target="_self"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">关于中文版</span></a></li></ul></aio-top-menu><aio-search-box class="search-container"><input type="search" aria-label="search" placeholder="搜索"></aio-search-box><div class="toolbar-external-icons-container"><a href="https://twitter.com/angular" title="Twitter" aria-label="Angular on twitter"><mat-icon role="img" svgicon="logos:twitter" class="mat-icon notranslate mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 50 59" xmlns="http://www.w3.org/2000/svg"><path d="M50,9.3c-1.8,0.8-3.8,1.4-5.9,1.6c2.1-1.3,3.7-3.3,4.5-5.7c-2,1.2-4.2,2-6.5,2.5c-1.9-2-4.5-3.2-7.5-3.2c-5.7,0-10.3,4.6-10.3,10.3c0,0.8,0.1,1.6,0.3,2.3C16.1,16.7,8.5,12.6,3.5,6.4c-0.9,1.5-1.4,3.3-1.4,5.2c0,3.6,1.8,6.7,4.6,8.5C5,20,3.4,19.6,2,18.8c0,0,0,0.1,0,0.1c0,5,3.5,9.1,8.2,10.1c-0.9,0.2-1.8,0.4-2.7,0.4c-0.7,0-1.3-0.1-1.9-0.2c1.3,4.1,5.1,7,9.6,7.1c-3.5,2.8-7.9,4.4-12.7,4.4c-0.8,0-1.6,0-2.4-0.1c4.5,2.9,9.9,4.6,15.7,4.6c18.9,0,29.2-15.6,29.2-29.2c0-0.4,0-0.9,0-1.3C46.9,13.2,48.6,11.4,50,9.3z"></path></svg></mat-icon></a><a href="https://github.com/angular/angular" title="GitHub" aria-label="Angular on github"><mat-icon role="img" svgicon="logos:github" class="mat-icon notranslate mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 51.8 50.4" xmlns="http://www.w3.org/2000/svg"><path d="M25.9,0.2C11.8,0.2,0.3,11.7,0.3,25.8c0,11.3,7.3,20.9,17.5,24.3c1.3,0.2,1.7-0.6,1.7-1.2c0-0.6,0-2.6,0-4.8c-7.1,1.5-8.6-3-8.6-3c-1.2-3-2.8-3.7-2.8-3.7c-2.3-1.6,0.2-1.6,0.2-1.6c2.6,0.2,3.9,2.6,3.9,2.6c2.3,3.9,6,2.8,7.5,2.1c0.2-1.7,0.9-2.8,1.6-3.4c-5.7-0.6-11.7-2.8-11.7-12.7c0-2.8,1-5.1,2.6-6.9c-0.3-0.7-1.1-3.3,0.3-6.8c0,0,2.1-0.7,7,2.6c2-0.6,4.2-0.9,6.4-0.9c2.2,0,4.4,0.3,6.4,0.9c4.9-3.3,7-2.6,7-2.6c1.4,3.5,0.5,6.1,0.3,6.8c1.6,1.8,2.6,4.1,2.6,6.9c0,9.8-6,12-11.7,12.6c0.9,0.8,1.7,2.4,1.7,4.7c0,3.4,0,6.2,0,7c0,0.7,0.5,1.5,1.8,1.2c10.2-3.4,17.5-13,17.5-24.3C51.5,11.7,40.1,0.2,25.9,0.2z"></path></svg></mat-icon></a></div></mat-toolbar-row></mat-toolbar><mat-sidenav-container role="main" class="mat-drawer-container mat-sidenav-container sidenav-container mat-drawer-transition has-floating-toc"><div class="mat-drawer-backdrop ng-star-inserted"></div><div class="cdk-visually-hidden cdk-focus-trap-anchor" aria-hidden="true"></div><mat-sidenav tabindex="-1" class="mat-drawer mat-sidenav sidenav ng-tns-c18-1 ng-trigger ng-trigger-transform mat-drawer-side ng-star-inserted mat-drawer-opened" style="transform:none;visibility:visible"><div class="mat-drawer-inner-container ng-tns-c18-1"><aio-nav-menu class="ng-tns-c18-1"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="docs" title="Angular 文档简介" target="_self"><span>简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="通过构建第一个 Angular 应用来学习基础知识" aria-pressed="false"><span>快速上手</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="start" title="介绍 Angular 的组件模型、模板语法和组件通讯" target="_self"><span>你的第一个应用</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="start/routing" title="介绍如何使用浏览器的 URL 在组件之间进行路由" target="_self"><span>路由</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="start/data" title="介绍服务以及如何访问外部数据" target="_self"><span>管理数据</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="start/forms" title="学习如何使用表单从用户那里获取并管理数据" target="_self"><span>表单</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="start/deployment" title="通过你的应用放到 Firebase 或自己的服务器上来把它分享给外界" target="_self"><span>部署</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="guide/setup-local" title="使用 Angular CLI 搭建本地开发环境简介" target="_self"><span>搭建环境</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="Angular 的基本原理" aria-pressed="false"><span>基本原理</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="介绍 Angular 应用中的一些基本概念。" aria-pressed="false"><span>Angular 的基本概念</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture" title="Angular 应用中的基本构造块。" target="_self"><span>基本概念简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture-modules" title="关于 Angular 模块（NgModules）。" target="_self"><span>模块简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture-components" title="关于组件、模板和视图。" target="_self"><span>组件简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture-services" title="关于服务与依赖注入。" target="_self"><span>服务与 DI 简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture-next-steps" title="超越基础阶段。" target="_self"><span>后续步骤</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="英雄指南是这里大量 Angular 范例的基础" aria-pressed="false"><span>英雄指南</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial" title="《英雄指南》教程简介" target="_self"><span>简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt0" title="创建应用的外壳" target="_self"><span>应用的“外壳”</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt1" title="第一部分：构建一个简单的英雄编辑器" target="_self"><span>1. 英雄编辑器</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt2" title="第二部分：构建一个主从结构的页面，用于展现英雄列表。" target="_self"><span>2. 显示英雄列表</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt3" title="第三部分：把主从结构的视图重构成几个独立的组件。" target="_self"><span>3. 创建特性组件</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt4" title="第四部分：创建一个可复用的服务来管理英雄数据。" target="_self"><span>4. 添加服务</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt5" title="第五部分：添加 Angular 路由器，并且学习在视图之间导航。" target="_self"><span>5. 添加应用内导航</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt6" title="第六部分：通过 HTTP 来获取并保存英雄数据。" target="_self"><span>6. 从服务器获取数据</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="通过数据绑定构建动态视图" aria-pressed="false"><span>组件与模板</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/displaying-data" title="属性绑定可以帮助应用把数据显示在界面上" target="_self"><span>显示数据</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/template-syntax" title="学习如何写模板，以便借助数据绑定机制显示数据并响应事件。" target="_self"><span>模板语法</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/user-input" title="用户输入会触发 DOM 事件。Angular 会通过事件绑定来监听那些事件，并把修改后的值传回应用的组件和模型中。" target="_self"><span>用户输入</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/lifecycle-hooks" title="Angular 调用指令和组件的生命周期钩子函数，包括它的创建、变更和销毁时。" target="_self"><span>生命周期钩子</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/component-interaction" title="在不同的指令和组件之间共享信息" target="_self"><span>组件交互</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/component-styles" title="添加专属于某个组件的样式" target="_self"><span>组件样式</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dynamic-component-loader" title="动态加载组件" target="_self"><span>动态组件</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/elements" title="把组件转换成自定义元素" target="_self"><span>Angular 元素</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/attribute-directives" title="属性型指令把行为添加到现有元素上。" target="_self"><span>属性型指令</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/structural-directives" title="结构型指令可以操纵页面的布局" target="_self"><span>结构型指令</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/pipes" title="管道可以在模板中转换显示的内容。" target="_self"><span>管道</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="Angular 的表单" aria-pressed="false"><span>表单</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/forms-overview" title="表单可以创建集中、高效、引人注目的输入体验。Angular 表单可以协调一组数据绑定控件，跟踪变更，验证输入，并表达错误信息。" target="_self"><span>简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/reactive-forms" title="使用 FormBuilder、表单组和表单数组创建响应式表单。" target="_self"><span>响应式表单</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/forms" title="使用指令和 Angular 模板语法创建模板驱动表单。" target="_self"><span>模板驱动表单</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/form-validation" title="验证用户的表单输入" target="_self"><span>表单验证</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dynamic-form" title="使用 FormGroup 渲染动态表单。" target="_self"><span>动态表单</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="Observable 与 RxJS" aria-pressed="false"><span>Observable 与 RxJS</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/observables" title="" target="_self"><span>可观察对象(Observable)</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/rx-library" title="" target="_self"><span>RxJS 库</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/observables-in-angular" title="" target="_self"><span>Angular 中的可观察对象</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/practical-observable-usage" title="" target="_self"><span>用法实战</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/comparing-observables" title="" target="_self"><span>与其它技术的比较</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="Angular 中的模块" aria-pressed="false"><span>NgModules</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ngmodules" title="使用 NgModule 让你的应用更高效" target="_self"><span>NgModule 简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ngmodule-vs-jsmodule" title="JavaScript 模块和 NgModule 之间的差异" target="_self"><span>JS 模块 vs NgModule</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/bootstrapping" title="告诉 Angular 如何在根 &quot;AppModule&quot; 中构造和引导应用。" target="_self"><span>应用的根模块</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/frequent-ngmodules" title="介绍最常用的 NgModule" target="_self"><span>常用模块</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/module-types" title="介绍特性模块的几种类型" target="_self"><span>特性模块的分类</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/entry-components" title="关于 Angular 中入口组件的一切" target="_self"><span>入口组件</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/feature-modules" title="创建特性模块，以组织你的代码" target="_self"><span>特性模块</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/providers" title="服务提供者与 NgModule" target="_self"><span>服务提供者</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/singleton-services" title="创建单例服务" target="_self"><span>单例服务</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/lazy-loading-ngmodules" title="惰性加载模块，以提高应用的性能" target="_self"><span>惰性加载的特性模块</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/sharing-ngmodules" title="共享 NgModule 让你的应用现代化。" target="_self"><span>共享 NgModule</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ngmodule-api" title="理解 NgModule 的那些细节。" target="_self"><span>NgModule API</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ngmodule-faq" title="回答关于 NgModules 的常见问题。" target="_self"><span>NgModule 常见问题</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="依赖注入：创建并注入各种服务。" aria-pressed="false"><span>依赖注入</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dependency-injection" title="Angular 的依赖注入系统能够为 Angular 创建的类创建并交付它们所依赖的服务。" target="_self"><span>Angular 依赖注入</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/hierarchical-dependency-injection" title="与组件树平行的注入器树，并支持嵌套的依赖。" target="_self"><span>多级注入器</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dependency-injection-providers" title="各种提供者类型的更多知识。" target="_self"><span>DI 提供者</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dependency-injection-in-action" title="依赖注入的使用技巧" target="_self"><span>DI 实战</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dependency-injection-navtree" title="使用注入器树来查找父组件。" target="_self"><span>浏览组件树</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/http" title="通过 HTTP 协议与远程服务器对话。" target="_self"><span>HttpClient</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/router" title="揭示如何通过 Angular 路由进行基本的屏幕导航。" target="_self"><span>路由与导航</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="Angular 动画系统指南" aria-pressed="false"><span>动画</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/animations" title="Angular 动画的基础技术。" target="_self"><span>简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/transition-and-triggers" title="转场与触发器的高级技术。" target="_self"><span>转场与触发器</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/complex-animation-sequences" title="复杂的 Angular 动画序列。" target="_self"><span>复杂序列</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/reusable-animations" title="创建可复用的动画。" target="_self"><span>可复用动画</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/route-animations" title="为路由提供转场动画。" target="_self"><span>路由转场动画</span></a></div></aio-nav-item></div></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="把 Angular 用到你的实际工作中的一些技巧" aria-pressed="false"><span>其它技术</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/security" title="Angular 应用开发中的安全技术。" target="_self"><span>安全</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/i18n" title="把应用模板中的文本翻译成多种语言。" target="_self"><span>国际化（i18n）</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/accessibility" title="设计能被所有用户访问的应用" target="_self"><span>无障碍（a11y）</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="Angular Service Worker: 控制应用资源的缓存。" aria-pressed="false"><span>Service Worker 与 PWA</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-intro" title="Angular 对 Service Worker 的实现提升了慢速或不稳定的网络连接下的用户体验。" target="_self"><span>简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-getting-started" title="在 CLI 项目中启用 Service Worker，并在浏览器中查看效果。" target="_self"><span>快速上手</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/app-shell" title="在 CLI 项目中启用应用外壳。" target="_self"><span>应用外壳</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-communications" title="那些能让你和 Angular 的 Service Worker 通讯的服务类。" target="_self"><span>与 Service Worker 通讯</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-devops" title="使用 Service Worker 运行应用、管理应用更新、调试以及杀掉正在运行的应用。" target="_self"><span>生产环境下的 Service Worker</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-config" title="配置 Service Worker 的缓存行为。" target="_self"><span>Service Worker 配置</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/universal" title="使用 Angular Universal 在服务端渲染 HTML。" target="_self"><span>服务端渲染</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="把 AngularJS 应用增量式的升级到 Angular。" aria-pressed="false"><span>从 AngularJS 升级</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/upgrade" title="把 AngularJS 应用增量式的升级到 Angular。" target="_self"><span>升级步骤</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/upgrade-performance" title="用更灵活的方式把 AngularJS 升级到 Angular。" target="_self"><span>更关注性能的升级方式</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ajs-quick-reference" title="学习如何把 AngularJS 的概念映射到 Angular 中。" target="_self"><span>AngularJS 与 Angular 的概念对照</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="使用共享库扩展 Angular" aria-pressed="false"><span>开发 Angular 库</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/libraries" title="理解何时以及如何使用和创建库。" target="_self"><span>库概览</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/using-libraries" title="把已发布的库集成进你的应用中。" target="_self"><span>使用已发布的库</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/creating-libraries" title="通过创建、发布和使用你自己的库来扩展 Angular。" target="_self"><span>创建库</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="理解原理图" aria-pressed="false"><span>原理图（Schematic）</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/schematics" title="理解 Angular 如何使用原理图。" target="_self"><span>原理图概览</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/schematics-authoring" title="理解原理图的结构。" target="_self"><span>制作原理图</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/schematics-for-libraries" title="使用原理图来把你的库集成进 Angular CLI 中。" target="_self"><span>库的原理图</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/cli-builder" title="使用构建器定制 Angular CLI。" target="_self"><span>CLI 构建器</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/web-worker" title="在 Angular CLI 中使用 Web Worker。" target="_self"><span>Web Worker</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 expanded selected ng-star-inserted" title="关于构建、测试和部署的信息" aria-pressed="true"><span>开发工作流</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 expanded selected"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="理解 AOT 预先编译器。" aria-pressed="false"><span>AOT 预先编译器</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/aot-compiler" title="学习为何以及如何使用预先编译器。" target="_self"><span>预先编译</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/angular-compiler-options" title="配置 AOT 编译。" target="_self"><span>Angular 编译器选项</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/aot-metadata-errors" title="解决 AOT 编译错误。" target="_self"><span>AOT 元数据错误</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/template-typecheck" title="Angular 中的模板类型检查。" target="_self"><span>模板类型检查</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/build" title="构建应用及为应用启动开发服务器。" target="_self"><span>构建与运行</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/bazel" title="如何配置你的环境，以利用 Bazel 进行构建和测试。" target="_self"><span>使用 Bazel 进行构建</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/testing" title="测试 Angular 应用的技巧与实践。" target="_self"><span>测试</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 expanded selected ng-star-inserted" style="position:relative" href="guide/deployment" title="了解如何部署 Angular 应用。" target="_self"><span>发布</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="与开发环境和工具集成起来" aria-pressed="false"><span>开发工具集成</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/language-service" title="使用 Angular 语言服务加速开发。" target="_self"><span>语言服务</span></a></div></aio-nav-item></div></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="工作空间与项目的结构，及其配置文件。" aria-pressed="false"><span>配置</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/file-structure" title="Angular 工作区在文件系统中是怎样的。" target="_self"><span>项目文件结构</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/workspace-config" title="&quot;angular.json&quot; 包含供 CLI 命令使用的工作区和项目默认配置。" target="_self"><span>工作区配置</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/npm-packages" title="开发期间和运行期间所需的 npm 包的说明。" target="_self"><span>npm 包</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/typescript-configuration" title="给 Angular 开发者的 TypeScript 配置。" target="_self"><span>TypeScript 配置</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/browser-support" title="浏览器支持与腻子脚本指南。" target="_self"><span>浏览器支持</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="Angular 的版本发布实践、更新与升级。" aria-pressed="false"><span>发布信息</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/updating" title="如何把 Angular 应用和库升级到最新版本。" target="_self"><span>保持最新</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/releases" title="Angular 的版本、发布、支持、弃用策略及实践。" target="_self"><span>发布实践</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/updating-to-version-9" title="支持把你的应用从 8 升级到 9。" target="_self"><span>升级到第 9 版</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/deprecations" title="弃用的 Angular API 和特性汇总。" target="_self"><span>弃用清单</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/ivy" title="关于 Angular Ivy 的编译与渲染管道。" target="_self"><span>Angular Ivy</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="Angular 语法、编码、术语汇总。" aria-pressed="false"><span>快捷手册</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/cheatsheet" title="关于 Angular 常用编码技术的快速指南。" target="_self"><span>速查表</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/styleguide" title="写出 Angular 风格的程序" target="_self"><span>风格指南</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/glossary" title="Angular 中最重要的词汇的简要定义。" target="_self"><span>词汇表</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="Angular CLI 命令参考手册。" aria-pressed="false"><span>CLI 命令</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli" title="CLI 工具介绍、命令、语法" target="_self"><span>概览</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/usage-analytics-gathering" title="管理员如何从用户那里收集使用情况分析。" target="_self"><span>使用情况分析</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/add" title="ng add." target="_self"><span>ng add</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/analytics" title="ng analytics." target="_self"><span>ng analytics</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/build" title="ng build." target="_self"><span>ng build</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/config" title="ng config." target="_self"><span>ng config</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/deploy" title="ng deploy." target="_self"><span>ng deploy</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/doc" title="ng doc." target="_self"><span>ng doc</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/e2e" title="ng e2e." target="_self"><span>ng e2e</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/generate" title="ng generate." target="_self"><span>ng generate</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/help" title="ng help." target="_self"><span>ng help</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/lint" title="ng lint." target="_self"><span>ng lint</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/new" title="ng new." target="_self"><span>ng new</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/run" title="ng run." target="_self"><span>ng run</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/serve" title="ng serve." target="_self"><span>ng serve</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/test" title="ng test." target="_self"><span>ng test</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/update" title="ng update." target="_self"><span>ng update</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/version" title="ng version." target="_self"><span>ng version</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/xi18n" title="ng xi18n." target="_self"><span>ng xi18n</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="api" title="关于 Angular 中类和值的详细信息。" target="_self"><span>API 参考手册</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><div class="mat-divider ng-star-inserted" style="margin:4px 20px;border-top:1px solid #d3d3d3"></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://github.com/ng-docs/ng-docs.github.io/issues" title="github 上的中文互助问答区" target="_blank"><span>互助问答</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://material.angular.cn" title="Angular Material 组件库的中文文档" target="_blank"><span>官方 Material 组件库</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://ng.ant.design/" title="Ant Design 的 Angular 实现，服务于企业级后台产品。" target="_blank"><span>ng-zorro 组件库</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://devui.design/" title="“华为云” 开源的企业级组件库，核心设计思想是：致简、沉浸、灵活" target="_blank"><span>华为 DevUI 组件库</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://ng.mobile.ant.design/" title="Ant Design Mobile 的 Angular 实现，服务于无线产品。" target="_blank"><span>ng-zorro mobile 组件库</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://flutter.cn/" title="Flutter 中文文档站" target="_blank"><span>友站：Flutter 中文</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item></aio-nav-menu><div class="doc-version ng-tns-c18-1"><aio-select><div class="form-select-menu"><button class="form-select-button"><span><strong></strong></span><span>stable (v9.0.0)</span></button></div></aio-select></div></div></mat-sidenav><div class="cdk-visually-hidden cdk-focus-trap-anchor" aria-hidden="true"></div><mat-sidenav-content cdkscrollable="" class="mat-drawer-content mat-sidenav-content ng-star-inserted" style="margin-left:261px"><main role="main" class="sidenav-content" id="guide-deployment"><aio-mode-banner></aio-mode-banner><aio-doc-viewer class=""><div style="opacity:1"><div class="github-links"><a href="https://github.com/angular/angular-cn/edit/aio/aio/content/guide/deployment.md?message=docs%3A%20请简述你的修改..." aria-label="提供编辑建议" title="提供编辑建议"><i class="material-icons" aria-hidden="true" role="img">mode_edit</i></a></div><div class="content"><h1 id="deployment" translation-result="on">部署<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deployment#deployment"><i class="material-icons">link</i></a></h1><aio-toc class="embedded" ng-version="9.0.0-rc.11"><div class="toc-inner no-print collapsed ng-star-inserted"><button type="button" title="Expand/collapse contents" aria-label="Expand/collapse contents" class="toc-heading embedded secondary ng-star-inserted" aria-pressed="false">目录<mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon collapsed mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><ul class="toc-list embedded"><li class="h2 ng-star-inserted" title="最简单的部署选项"><a href="guide/deployment#simple-deployment-options">最简单的部署选项</a></li><li class="h3 ng-star-inserted" title="从磁盘构建和提供服务"><a href="guide/deployment#building-and-serving-from-disk">从磁盘构建和提供服务</a></li><li class="h3 ng-star-inserted" title="使用 CLI 进行自动部署"><a href="guide/deployment#automatic-deployment-with-the-cli">使用 CLI 进行自动部署</a></li><li class="h3 secondary ng-star-inserted" title="最简化的部署方式"><a href="guide/deployment#basic-deployment-to-a-remote-server">最简化的部署方式</a></li><li class="h3 secondary ng-star-inserted" title="发布到 GitHub pages（页面服务）"><a href="guide/deployment#deploy-to-github-pages">发布到 GitHub pages（页面服务）</a></li><li class="h2 secondary ng-star-inserted" title="服务端配置"><a href="guide/deployment#server-configuration">服务端配置</a></li><li class="h3 secondary ng-star-inserted" title="带路由的应用必须以 index.html 作为后备页面"><a href="guide/deployment#routed-apps-must-fallback-to-indexhtml">带路由的应用必须以 <code>index.html</code> 作为后备页面</a></li><li class="h3 secondary ng-star-inserted" title="请求来自另一个服务器的服务（CORS）"><a href="guide/deployment#requesting-services-from-a-different-server-cors">请求来自另一个服务器的服务（CORS）</a></li><li class="h2 secondary ng-star-inserted" title="为生产环境优化"><a href="guide/deployment#production-optimizations">为生产环境优化</a></li><li class="h3 secondary ng-star-inserted" title="启用生产模式"><a href="guide/deployment#enable-runtime-production-mode">启用生产模式</a></li><li class="h3 secondary ng-star-inserted" title="惰性加载"><a href="guide/deployment#lazy-loading">惰性加载</a></li><li class="h3 secondary ng-star-inserted" title="测量性能"><a href="guide/deployment#measure-performance">测量性能</a></li><li class="h3 secondary ng-star-inserted" title="检查发布包"><a href="guide/deployment#inspect-the-bundles">检查发布包</a></li><li class="h2 secondary ng-star-inserted" title="base 标签"><a href="guide/deployment#the-base-tag"><code>base</code> 标签</a></li><li class="h2 secondary ng-star-inserted" title="差异化加载"><a href="guide/deployment#differential-loading">差异化加载</a></li><li class="h3 secondary ng-star-inserted" title="差异化构建"><a href="guide/deployment#differential-builds">差异化构建</a></li><li class="h3 secondary ng-star-inserted" title="配置差异化加载"><a href="guide/deployment#configuring-differential-loading">配置差异化加载</a></li><li class="h3 secondary ng-star-inserted" title="选择性地排除差异化加载"><a href="guide/deployment#opting-out-of-differential-loading">选择性地排除差异化加载</a></li><li class="h2 secondary ng-star-inserted" title="旧版浏览器中的本地开发"><a href="guide/deployment#local-development-in-older-browsers">旧版浏览器中的本地开发</a></li><li class="h3 secondary ng-star-inserted" title="为 ES5 配置服务"><a href="guide/deployment#configuring-serve-for-es5">为 ES5 配置服务</a></li><li class="h3 secondary ng-star-inserted" title="配置 test 命令"><a href="guide/deployment#configuring-the-test-command">配置 <code>test</code> 命令</a></li><li class="h3 secondary ng-star-inserted" title="配置 e2e 命令"><a href="guide/deployment#configuring-the-e2e-command">配置 <code>e2e</code> 命令</a></li></ul><button type="button" title="Expand/collapse contents" aria-label="Expand/collapse contents" class="toc-more-items embedded material-icons collapsed ng-star-inserted" aria-pressed="false"></button></div></aio-toc><h1 translation-origin="off" id="deployment">Deployment<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deployment#deployment"><i class="material-icons">link</i></a></h1><p translation-result="on">当你准备把 Angular 应用部署到远程服务器上时，有很多可选的部署方式。</p><p translation-origin="off">When you are ready to deploy your Angular application to a remote server, you have various options for deployment.</p><a id="dev-deploy"></a> <a id="copy-files"></a><h2 id="simple-deployment-options" translation-result="on">最简单的部署选项<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deployment#simple-deployment-options"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="simple-deployment-options">Simple deployment options<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deployment#simple-deployment-options"><i class="material-icons">link</i></a></h2><p translation-result="on">在完整部署应用之前，你可以先临时用一种技术来测试流程、构建配置和部署行为。</p><p translation-origin="off">Before fully deploying your application, you can test the process, build configuration, and deployed behavior by using one of these interim techniques.</p><h3 id="building-and-serving-from-disk" translation-result="on">从磁盘构建和提供服务<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deployment#building-and-serving-from-disk"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="building-and-serving-from-disk">Building and serving from disk<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deployment#building-and-serving-from-disk"><i class="material-icons">link</i></a></h3><p translation-result="on">在开发过程中，你通常会使用 <code>ng serve</code> 命令来借助 <a href="https://webpack.js.org/guides/development/#webpack-dev-server">webpack-dev-server</a> 在本地内存中构建、监控和提供服务。但是，当你打算部署它时，就必须使用 <code>ng build</code> 命令来构建应用并在其它地方部署这些构建成果。</p><p translation-origin="off">During development, you typically use the <code>ng serve</code> command to build, watch, and serve the application from local memory, using <a href="https://webpack.js.org/guides/development/#webpack-dev-server">webpack-dev-server</a>. When you are ready to deploy, however, you must use the <code>ng build</code> command to build the app and deploy the build artifacts elsewhere.</p><p translation-result="on"><code>ng build</code> 和 <code>ng serve</code> 在构建项目之前都会清除输出文件夹，但只有 <code>ng build</code> 命令会把生成的构建成果写入输出输出文件夹中。</p><p translation-origin="off">Both <code>ng build</code> and <code>ng serve</code> clear the output folder before they build the project, but only the <code>ng build</code> command writes the generated build artifacts to the output folder.</p><div class="alert is-helpful"><p translation-result="on">默认情况下，输出目录是 <code>dist/project-name/</code>。要输出到其它文件夹，就要修改 <code>angular.json</code> 中的 <code>outputPath</code>。</p><p translation-origin="off">The output folder is <code>dist/project-name/</code> by default. To output to a different folder, change the <code>outputPath</code> in <code>angular.json</code>.</p></div><p translation-result="on">当开发临近收尾时，让本地 Web 服务器使用输出文件夹中的内容提供服务可以让你更好地了解当应用部署到远程服务器时的行为。你需要用两个终端才能体验到实时刷新的特性。</p><p translation-origin="off">As you near the end of the development process, serving the contents of your output folder from a local web server can give you a better idea of how your application will behave when it is deployed to a remote server. You will need two terminals to get the live-reload experience.</p><ul><li><p translation-result="on">在第一个终端上，在<em>监控（watch）</em>模式下执行 <a href="cli/build"><code>ng build</code> 命令</a>把该应用编译进 <code>dist</code> 文件夹。</p><p translation-origin="off">On the first terminal, run the <a href="cli/build"><code>ng build</code> command</a> in <em>watch</em> mode to compile the application to the <code>dist</code> folder.</p><code-example language="none" class="code-shell" ng-version="9.0.0-rc.11"><div style="display:none">ng build --watch</div><aio-code><pre class="lang-none prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">ng build </span><span class="pun">--</span><span class="pln">watch</span></code>
    </pre></aio-code></code-example><p translation-result="on">与 <code>ng serve</code> 命令一样，当源文件发生变化时，就会重新生成输出文件。</p><p translation-origin="off">Like the <code>ng serve</code> command, this regenerates output files when source files change.</p></li><li><p translation-result="on">在第二个终端上，安装一个 Web 服务器（比如 <a href="https://github.com/johnpapa/lite-server">lite-server</a> ），然后使用输出文件夹中的内容运行它。例如：</p><p translation-origin="off">On the second terminal, install a web server (such as <a href="https://github.com/johnpapa/lite-server">lite-server</a>), and run it against the output folder. For example:</p><code-example language="none" class="code-shell" ng-version="9.0.0-rc.11"><div style="display:none">lite-server --baseDir="dist/project-name"</div><aio-code><pre class="lang-none prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">lite</span><span class="pun">-</span><span class="pln">server </span><span class="pun">--</span><span class="pln">baseDir</span><span class="pun">=</span><span class="str">"dist/project-name"</span></code>
    </pre></aio-code></code-example><p translation-result="on">每当输出了新文件时，服务器就会自动刷新你的浏览器。</p><p translation-origin="off">The server will automatically reload your browser when new files are output.</p></li></ul><div class="alert is-critical"><p translation-result="on">该方法只能用于开发和测试，在部署应用时，它不受支持，也不是安全的方式。</p><p translation-origin="off">This method is for development and testing only, and is not a supported or secure way of deploying an application.</p></div><h3 id="automatic-deployment-with-the-cli" translation-result="on">使用 CLI 进行自动部署<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deployment#automatic-deployment-with-the-cli"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="automatic-deployment-with-the-cli">Automatic deployment with the CLI<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deployment#automatic-deployment-with-the-cli"><i class="material-icons">link</i></a></h3><p translation-result="on">Angular CLI 命令 <code>ng deploy</code>（在版本 8.3.0 中引入）执行与您的项目关联的 <code>deploy</code> <a href="https://angular.io/guide/cli-builder">CLI 构建器</a>。有许多第三方构建器实现了到不同平台的部署功能。您可以通过运行 <code>ng add [package name]</code> 把它们中的任何一个添加到项目中。</p><p translation-origin="off">The Angular CLI command <code>ng deploy</code> (introduced in version 8.3.0) executes the <code>deploy</code> <a href="https://angular.io/guide/cli-builder">CLI builder</a> associated with your project. A number of third-party builders implement deployment capabilities to different platforms. You can add any of them to your project by running <code>ng add [package name]</code>.</p><p translation-result="on">添加具有部署功能的程序包时，它将为所选项目自动更新自动更新工作区配置（<code>angular.json</code> 文件）中的 <code>deploy</code> 部分。然后，您就可以使用 <code>ng deploy</code> 命令来部署该项目了。</p><p translation-origin="off">When you add a package with deployment capability, it'll automatically update your workspace configuration (<code>angular.json</code> file) with a <code>deploy</code> section for the selected project. You can then use the <code>ng deploy</code> command to deploy that project.</p><p translation-result="on">例如，以下命令将项目自动部署到 Firebase。</p><p translation-origin="off">For example, the following command automatically deploys a project to Firebase.</p><code-example language="none" class="code-shell" ng-version="9.0.0-rc.11"><div style="display:none">ng add @angular/fire ng deploy</div><aio-code><pre class="lang-none prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">ng </span><span class="kwd">add</span><span class="pln"> </span><span class="lit">@angular</span><span class="pun">/</span><span class="pln">fire
ng deploy</span></code>
    </pre></aio-code></code-example><p translation-result="on">该命令是交互式的。在这种情况下，您必须拥有或创建 Firebase 帐户，并使用该帐户进行身份验证。该命令提示您选择要部署的 Firebase 项目。</p><p translation-origin="off">The command is interactive. In this case, you must have or create a Firebase account, and authenticate using that account. The command prompts you to select a Firebase project for deployment</p><p translation-result="on">该命令会为您的应用程序生成最佳构建（等效于 <code>ng deploy --prod</code>）后，将生产环境下的资产文件上传到 Firebase。</p><p translation-origin="off">After the command produces an optimal build of your application (equivalent to <code>ng deploy --prod</code>), it'll upload the production assets to Firebase.</p><p translation-result="on">在下表中，您可以找到实现了到不同平台部署功能的软件包列表。每个软件包的 <code>deploy</code> 命令可能需要不同的命令行选项。您可以通过以下与包名称相关的链接来阅读更多内容：</p><p translation-origin="off">In the table below, you can find a list of packages which implement deployment functionality to different platforms. The <code>deploy</code> command for each package may require different command line options. You can read more by following the links associated with the package names below:</p><table><thead><tr><th><p translation-result="on">部署到</p><p translation-origin="off">Deployment to</p></th><th><p translation-result="on">NPM 包</p><p translation-origin="off">Package</p></th></tr></thead><tbody><tr><td><a href="https://firebase.google.com/docs/hosting">Firebase hosting</a></td><td><a href="https://npmjs.org/package/@angular/fire"><code>@angular/fire</code></a></td></tr><tr><td><a href="https://azure.microsoft.com/en-us/">Azure</a></td><td><a href="https://npmjs.org/package/@azure/ng-deploy"><code>@azure/ng-deploy</code></a></td></tr><tr><td><a href="https://zeit.co/now">Now</a></td><td><a href="https://npmjs.org/package/@zeit/ng-deploy"><code>@zeit/ng-deploy</code></a></td></tr><tr><td><a href="https://www.netlify.com/">Netlify</a></td><td><a href="https://npmjs.org/package/@netlify-builder/deploy"><code>@netlify-builder/deploy</code></a></td></tr><tr><td><a href="https://pages.github.com/">GitHub pages</a></td><td><a href="https://npmjs.org/package/angular-cli-ghpages"><code>angular-cli-ghpages</code></a></td></tr><tr><td><a href="https://npmjs.com/">NPM</a></td><td><a href="https://npmjs.org/package/ngx-deploy-npm"><code>ngx-deploy-npm</code></a></td></tr></tbody></table><p translation-result="on">如果要部署到自己管理的服务器上，或者缺少针对你喜欢的云平台的构建器，则可以创建支持您使用 <code>ng deploy</code> 命令的构建器，或者通读本指南以了解如何手动部署应用程序。</p><p translation-origin="off">If you're deploying to a self-managed server or there's no builder for your favorite cloud platform, you can either create a builder that allows you to use the <code>ng deploy</code> command, or read through this guide to learn how to manually deploy your app.</p><h3 id="basic-deployment-to-a-remote-server" translation-result="on">最简化的部署方式<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deployment#basic-deployment-to-a-remote-server"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="basic-deployment-to-a-remote-server">Basic deployment to a remote server<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deployment#basic-deployment-to-a-remote-server"><i class="material-icons">link</i></a></h3><p translation-result="on">最简化的部署方式就是为开发环境构建，并把其输出复制到 Web 服务器上。</p><p translation-origin="off">For the simplest deployment, create a production build and copy the output directory to a web server.</p><ol><li><p translation-result="on">使用开发环境进行构建</p><p translation-origin="off">Start with the production build:</p><code-example language="none" class="code-shell" ng-version="9.0.0-rc.11"><div style="display:none">ng build --prod</div><aio-code><pre class="lang-none prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">ng build </span><span class="pun">--</span><span class="pln">prod</span></code>
    </pre></aio-code></code-example></li><li><p translation-result="on">把输出目录（默认为 <code>dist/</code>）下的<em>每个文件</em>都复制到到服务器上的某个目录下。</p><p translation-origin="off">Copy <em>everything</em> within the output folder (<code>dist/</code> by default) to a folder on the server.</p></li><li><p translation-result="on">配置服务器，让缺失的文件都重定向到 <code>index.html</code> 上。 欲知详情，参见<a href="guide/deployment#fallback">稍后</a>的服务端重定向部分。</p><p translation-origin="off">Configure the server to redirect requests for missing files to <code>index.html</code>. Learn more about server-side redirects <a href="guide/deployment#fallback">below</a>.</p></li></ol><p translation-result="on">这是对应用进行生产环境部署的最简方式。</p><p translation-origin="off">This is the simplest production-ready deployment of your application.</p><a id="deploy-to-github"></a><h3 id="deploy-to-github-pages" translation-result="on">发布到 GitHub pages（页面服务）<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deployment#deploy-to-github-pages"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="deploy-to-github-pages">Deploy to GitHub pages<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deployment#deploy-to-github-pages"><i class="material-icons">link</i></a></h3><p translation-result="on">另一种发布 Angular 应用的简单途径是使用 <a href="https://help.github.com/articles/what-is-github-pages/">GitHub Pages</a>。</p><p translation-origin="off">Another simple way to deploy your Angular app is to use <a href="https://help.github.com/articles/what-is-github-pages/">GitHub Pages</a>.</p><ol><li><p translation-result="on">你需要<a href="https://github.com/join">创建一个 GitHub 账号</a>（如果没有的话），然后为你的项目<a href="https://help.github.com/articles/create-a-repo/">创建一个仓库</a>。记下 GitHub 中的用户名和项目名。</p><p translation-origin="off">You need to <a href="https://github.com/join">create a GitHub account</a> if you don't have one, and then <a href="https://help.github.com/articles/create-a-repo/">create a repository</a> for your project. Make a note of the user name and project name in GitHub.</p></li><li><p translation-result="on">使用 Angular CLI 命令 <a href="cli/build"><code>ng build</code></a>来构建这个 GitHub 项目，选项如下：</p><p translation-origin="off">Build your project using Github project name, with the Angular CLI command <a href="cli/build"><code>ng build</code></a>and the options shown here:</p><code-example language="none" class="code-shell" ng-version="9.0.0-rc.11"><div style="display:none">ng build --prod --output-path docs --base-href /&lt;project_name&gt;/</div><aio-code><pre class="lang-none prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">ng build </span><span class="pun">--</span><span class="pln">prod </span><span class="pun">--</span><span class="pln">output</span><span class="pun">-</span><span class="pln">path docs </span><span class="pun">--</span><span class="kwd">base</span><span class="pun">-</span><span class="pln">href </span><span class="pun">/&lt;</span><span class="pln">project_name</span><span class="pun">&gt;/</span></code>
    </pre></aio-code></code-example></li><li><p translation-result="on">当构建完成时，把 <code>docs/index.html</code> 复制为 <code>docs/404.html</code>。</p><p translation-origin="off">When the build is complete, make a copy of <code>docs/index.html</code> and name it <code>docs/404.html</code>.</p></li><li><p translation-result="on">提交你的更改，并推送。</p><p translation-origin="off">Commit your changes and push.</p></li><li><p translation-result="on">在 GitHub 的项目页中，把该项目配置为<a href="https://help.github.com/articles/configuring-a-publishing-source-for-github-pages/#publishing-your-github-pages-site-from-a-docs-folder-on-your-master-branch">从 docs 目录下发布</a>。</p><p translation-origin="off">On the GitHub project page, configure it to <a href="https://help.github.com/articles/configuring-a-publishing-source-for-github-pages/#publishing-your-github-pages-site-from-a-docs-folder-on-your-master-branch">publish from the docs folder</a>.</p></li></ol><p translation-result="on">你可以到 <code>https://&lt;user_name&gt;.github.io/&lt;project_name&gt;/</code> 中查看部署好的页面。</p><p translation-origin="off">You can see your deployed page at <code>https://&lt;user_name&gt;.github.io/&lt;project_name&gt;/</code>.</p><div class="alert is-helpful"><p translation-result="on">参见 <a href="https://github.com/angular-buch/angular-cli-ghpages">angular-cli-ghpages</a>，这个包用到了全部这些特性，还提供了一些额外功能。</p><p translation-origin="off">Check out <a href="https://github.com/angular-buch/angular-cli-ghpages">angular-cli-ghpages</a>, a full featured package that does all this for you and has extra functionality.</p></div><hr><a id="server-configuration"></a><h2 id="server-configuration" translation-result="on">服务端配置<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deployment#server-configuration"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="server-configuration">Server configuration<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deployment#server-configuration"><i class="material-icons">link</i></a></h2><p translation-result="on">这一节涵盖了你可能对服务器或准备部署到服务器的文件要做的那些修改。</p><p translation-origin="off">This section covers changes you may have to make to the server or to files deployed on the server.</p><a id="fallback"></a><h3 id="routed-apps-must-fallback-to-indexhtml" translation-result="on">带路由的应用必须以 <code>index.html</code> 作为后备页面<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deployment#routed-apps-must-fallback-to-indexhtml"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="routed-apps-must-fallback-to-indexhtml">Routed apps must fallback to <code>index.html</code><a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deployment#routed-apps-must-fallback-to-indexhtml"><i class="material-icons">link</i></a></h3><p translation-result="on">Angular 应用很适合用简单的静态 HTML 服务器提供服务。 你不需要服务端引擎来动态合成应用页面，因为 Angular 会在客户端完成这件事。</p><p translation-origin="off">Angular apps are perfect candidates for serving with a simple static HTML server. You don't need a server-side engine to dynamically compose application pages because Angular does that on the client-side.</p><p translation-result="on">如果该应用使用 Angular 路由器，你就必须配置服务器，让它对不存在的文件返回应用的宿主页(<code>index.html</code>)。</p><p translation-origin="off">If the app uses the Angular router, you must configure the server to return the application's host page (<code>index.html</code>) when asked for a file that it does not have.</p><a id="deep-link"></a><p translation-result="on">带路由的应用应该支持“深链接”。 所谓<em>深链接</em>就是指一个 URL，它用于指定到应用内某个组件的路径。 比如，<code>http://www.mysite.com/heroes/42</code> 就是一个到英雄详情页面的<em>深链接</em>，用于显示 <code>id: 42</code> 的英雄。</p><p translation-origin="off">A routed application should support "deep links". A <em>deep link</em> is a URL that specifies a path to a component inside the app. For example, <code>http://www.mysite.com/heroes/42</code> is a <em>deep link</em> to the hero detail page that displays the hero with <code>id: 42</code>.</p><p translation-result="on">当用户从运行中的客户端应用导航到这个 URL 时，这没问题。 Angular 路由器会拦截这个 URL，并且把它路由到正确的页面。</p><p translation-origin="off">There is no issue when the user navigates to that URL from within a running client. The Angular router interprets the URL and routes to that page and hero.</p><p translation-result="on">但是，当从邮件中点击链接或在浏览器地址栏中输入它或仅仅在英雄详情页刷新下浏览器时，所有这些操作都是由浏览器本身处理的，在应用的控制范围之外。 浏览器会直接向服务器请求那个 URL，路由器没机会插手。</p><p translation-origin="off">But clicking a link in an email, entering it in the browser address bar, or merely refreshing the browser while on the hero detail page — all of these actions are handled by the browser itself, <em>outside</em> the running application. The browser makes a direct request to the server for that URL, bypassing the router.</p><p translation-result="on">静态服务器会在收到对 <code>http://www.mysite.com/</code> 的请求时返回 <code>index.html</code>，但是会拒绝对 <code>http://www.mysite.com/heroes/42</code> 的请求， 并返回一个 <code>404 - Not Found</code> 错误，除非，它被配置成了返回 <code>index.html</code>。</p><p translation-origin="off">A static server routinely returns <code>index.html</code> when it receives a request for <code>http://www.mysite.com/</code>. But it rejects <code>http://www.mysite.com/heroes/42</code> and returns a <code>404 - Not Found</code> error <em>unless</em> it is configured to return <code>index.html</code> instead.</p><h4 id="fallback-configuration-examples" translation-result="on">后备页面配置范例<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deployment#fallback-configuration-examples"><i class="material-icons">link</i></a></h4><h4 translation-origin="off" id="fallback-configuration-examples">Fallback configuration examples<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deployment#fallback-configuration-examples"><i class="material-icons">link</i></a></h4><p translation-result="on">没有一种配置可以适用于所有服务器。 后面这些部分会描述对常见服务器的配置方式。 这个列表虽然不够详尽，但可以为你提供一个良好的起点。</p><p translation-origin="off">There is no single configuration that works for every server. The following sections describe configurations for some of the most popular servers. The list is by no means exhaustive, but should provide you with a good starting point.</p><ul><li><p translation-result="on"><a href="https://httpd.apache.org/">Apache</a>：在 <code>.htaccess</code> 文件中添加一个<a href="http://httpd.apache.org/docs/current/mod/mod_rewrite.html">重写规则</a>， 代码如下（<a href="https://ngmilk.rocks/2015/03/09/angularjs-html5-mode-or-pretty-urls-on-apache-using-htaccess/">出处</a>）：</p><p translation-origin="off"><a href="https://httpd.apache.org/">Apache</a>: add a <a href="http://httpd.apache.org/docs/current/mod/mod_rewrite.html">rewrite rule</a> to the <code>.htaccess</code> file as shown (<a href="https://ngmilk.rocks/2015/03/09/angularjs-html5-mode-or-pretty-urls-on-apache-using-htaccess/">https://ngmilk.rocks/2015/03/09/angularjs-html5-mode-or-pretty-urls-on-apache-using-htaccess/</a>):</p><code-example ng-version="9.0.0-rc.11"><div style="display:none">RewriteEngine On # If an existing asset or directory is requested go to it as it is RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR] RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d RewriteRule ^ - [L]<br># If the requested resource doesn't exist, use index.html RewriteRule ^ /index.html</div><aio-code><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="typ">RewriteEngine</span><span class="pln"> </span><span class="typ">On</span><span class="pln">
</span><span class="com"># If an existing asset or directory is requested go to it as it is</span><span class="pln">
</span><span class="typ">RewriteCond</span><span class="pln"> </span><span class="pun">%{</span><span class="pln">DOCUMENT_ROOT</span><span class="pun">}%{</span><span class="pln">REQUEST_URI</span><span class="pun">}</span><span class="pln"> </span><span class="pun">-</span><span class="pln">f </span><span class="pun">[</span><span class="pln">OR</span><span class="pun">]</span><span class="pln">
</span><span class="typ">RewriteCond</span><span class="pln"> </span><span class="pun">%{</span><span class="pln">DOCUMENT_ROOT</span><span class="pun">}%{</span><span class="pln">REQUEST_URI</span><span class="pun">}</span><span class="pln"> </span><span class="pun">-</span><span class="pln">d
</span><span class="typ">RewriteRule</span><span class="pln"> </span><span class="pun">^</span><span class="pln"> </span><span class="pun">-</span><span class="pln"> </span><span class="pun">[</span><span class="pln">L</span><span class="pun">]</span><br><span class="pln">
</span><span class="com"># If the requested resource doesn't exist, use index.html</span><span class="pln">
</span><span class="typ">RewriteRule</span><span class="pln"> </span><span class="pun">^</span><span class="pln"> </span><span class="pun">/</span><span class="pln">index</span><span class="pun">.</span><span class="pln">html</span></code>
    </pre></aio-code></code-example></li><li><p translation-result="on"><a href="http://nginx.org/">NGinx</a>：使用 <code>try_files</code> 指向 <code>index.html</code>，详细描述见<a href="https://www.nginx.com/resources/wiki/start/topics/tutorials/config_pitfalls/#front-controller-pattern-web-apps">Web 应用的前端控制器模式</a>。</p><p translation-origin="off"><a href="http://nginx.org/">Nginx</a>: use <code>try_files</code>, as described in <a href="https://www.nginx.com/resources/wiki/start/topics/tutorials/config_pitfalls/#front-controller-pattern-web-apps">Front Controller Pattern Web Apps</a>, modified to serve <code>index.html</code>:</p><code-example ng-version="9.0.0-rc.11"><div style="display:none">try_files $uri $uri/ /index.html;</div><aio-code><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">try_files $uri $uri</span><span class="pun">/</span><span class="pln"> </span><span class="pun">/</span><span class="pln">index</span><span class="pun">.</span><span class="pln">html</span><span class="pun">;</span></code>
    </pre></aio-code></code-example></li><li><p translation-result="on"><a href="https://www.ruby-lang.org/">Ruby</a>：使用 <a href="http://sinatrarb.com/">sinatra</a> 和用来配置服务器的基础 Ruby 文件 <code>server.rb</code> 创建一个 Ruby 服务器：</p><p translation-origin="off"><a href="https://www.ruby-lang.org/">Ruby</a>: create a Ruby server using (<a href="http://sinatrarb.com/">sinatra</a>) with a basic Ruby file that configures the server <code>server.rb</code>:</p><code-example language="ruby" ng-version="9.0.0-rc.11"><div style="display:none">require 'sinatra' # Folder structure # . # -- server.rb # -- public # |-- dist # |-- index.html get '/' do folderDir = settings.public_folder + '/dist' # ng build output folder send_file File.join(folderDir, 'index.html') end</div><aio-code><pre class="lang-ruby prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">require </span><span class="str">'sinatra'</span><span class="pln">

</span><span class="com"># Folder structure</span><span class="pln">

</span><span class="com"># .</span><span class="pln">

</span><span class="com"># -- server.rb</span><span class="pln">

</span><span class="com"># -- public</span><span class="pln">

</span><span class="com">#    |-- dist</span><span class="pln">

</span><span class="com">#        |-- index.html</span><span class="pln">

get </span><span class="str">'/'</span><span class="pln"> </span><span class="kwd">do</span><span class="pln">
    folderDir </span><span class="pun">=</span><span class="pln"> settings</span><span class="pun">.</span><span class="pln">public_folder </span><span class="pun">+</span><span class="pln"> </span><span class="str">'/dist'</span><span class="pln">  </span><span class="com"># ng build output folder</span><span class="pln">
    send_file </span><span class="typ">File</span><span class="pun">.</span><span class="pln">join</span><span class="pun">(</span><span class="pln">folderDir</span><span class="pun">,</span><span class="pln"> </span><span class="str">'index.html'</span><span class="pun">)</span><span class="pln">
</span><span class="kwd">end</span></code>
    </pre></aio-code></code-example></li><li><p translation-result="on"><a href="https://www.iis.net/">IIS</a>：往 <code>web.config</code> 中添加一条重写规则，类似于<a href="http://stackoverflow.com/a/26152011/2116927">这里</a>：</p><p translation-origin="off"><a href="https://www.iis.net/">IIS</a>: add a rewrite rule to <code>web.config</code>, similar to the one shown <a href="http://stackoverflow.com/a/26152011/2116927">here</a>:</p><code-example format="." language="xml" ng-version="9.0.0-rc.11"><div style="display:none">&lt;system.webServer&gt; &lt;rewrite&gt; &lt;rules&gt; &lt;rule name="Angular <a href="api/router/Routes" class="code-anchor">Routes</a>" stopProcessing="true"&gt; &lt;match url=".*" /&gt; &lt;conditions logicalGrouping="MatchAll"&gt; &lt;add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /&gt; &lt;add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /&gt; &lt;/conditions&gt; &lt;action type="Rewrite" url="/index.html" /&gt; &lt;/rule&gt; &lt;/rules&gt; &lt;/rewrite&gt; &lt;/system.webServer&gt;</div><aio-code><pre class="lang-xml prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;system.webServer&gt;</span><span class="pln">
  </span><span class="tag">&lt;rewrite&gt;</span><span class="pln">
    </span><span class="tag">&lt;rules&gt;</span><span class="pln">
      </span><span class="tag">&lt;rule</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"Angular </span><a href="api/router/Routes" class="code-anchor"><span class="atv">Routes</span></a><span class="atv">"</span><span class="pln"> </span><span class="atn">stopProcessing</span><span class="pun">=</span><span class="atv">"true"</span><span class="tag">&gt;</span><span class="pln">
        </span><span class="tag">&lt;match</span><span class="pln"> </span><span class="atn">url</span><span class="pun">=</span><span class="atv">".*"</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln">
        </span><span class="tag">&lt;conditions</span><span class="pln"> </span><span class="atn">logicalGrouping</span><span class="pun">=</span><span class="atv">"MatchAll"</span><span class="tag">&gt;</span><span class="pln">
          </span><span class="tag">&lt;add</span><span class="pln"> </span><span class="atn">input</span><span class="pun">=</span><span class="atv">"{REQUEST_FILENAME}"</span><span class="pln"> </span><span class="atn">matchType</span><span class="pun">=</span><span class="atv">"IsFile"</span><span class="pln"> </span><span class="atn">negate</span><span class="pun">=</span><span class="atv">"true"</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln">
          </span><span class="tag">&lt;add</span><span class="pln"> </span><span class="atn">input</span><span class="pun">=</span><span class="atv">"{REQUEST_FILENAME}"</span><span class="pln"> </span><span class="atn">matchType</span><span class="pun">=</span><span class="atv">"IsDirectory"</span><span class="pln"> </span><span class="atn">negate</span><span class="pun">=</span><span class="atv">"true"</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln">
        </span><span class="tag">&lt;/conditions&gt;</span><span class="pln">
        </span><span class="tag">&lt;action</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"Rewrite"</span><span class="pln"> </span><span class="atn">url</span><span class="pun">=</span><span class="atv">"/index.html"</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln">
      </span><span class="tag">&lt;/rule&gt;</span><span class="pln">
    </span><span class="tag">&lt;/rules&gt;</span><span class="pln">
  </span><span class="tag">&lt;/rewrite&gt;</span><span class="pln">
</span><span class="tag">&lt;/system.webServer&gt;</span></code>
    </pre></aio-code></code-example></li><li><p translation-result="on"><a href="https://pages.github.com/">GitHub 页面服务</a>：你没办法<a href="https://github.com/isaacs/github/issues/408">直接配置</a> Github 的页面服务，但可以添加一个 404 页，只要把 <code>index.html</code> 复制到 <code>404.html</code> 就可以了。 它仍然会给出一个 404 响应，但是浏览器将会正确处理该页，并正常加载该应用。 使用<a href="https://help.github.com/articles/configuring-a-publishing-source-for-github-pages/#publishing-your-github-pages-site-from-a-docs-folder-on-your-master-branch">在主分支的 <code>docs/</code> 下启动服务</a> 并<a href="https://www.bennadel.com/blog/3181-including-node-modules-and-vendors-folders-in-your-github-pages-site.htm">创建一个 <code>.nojekyll</code> 文件</a>也是一个好办法。</p><p translation-origin="off"><a href="https://pages.github.com/">GitHub Pages</a>: you can't <a href="https://github.com/isaacs/github/issues/408">directly configure</a> the GitHub Pages server, but you can add a 404 page. Copy <code>index.html</code> into <code>404.html</code>. It will still be served as the 404 response, but the browser will process that page and load the app properly. It's also a good idea to <a href="https://help.github.com/articles/configuring-a-publishing-source-for-github-pages/#publishing-your-github-pages-site-from-a-docs-folder-on-your-master-branch">serve from <code>docs/</code> on master</a> and to <a href="https://www.bennadel.com/blog/3181-including-node-modules-and-vendors-folders-in-your-github-pages-site.htm">create a <code>.nojekyll</code> file</a></p></li><li><p translation-result="on"><a href="https://firebase.google.com/docs/hosting/">Firebase 主机服务</a>：添加一条<a href="https://firebase.google.com/docs/hosting/url-redirects-rewrites#section-rewrites">重写规则</a>。</p><p translation-origin="off"><a href="https://firebase.google.com/docs/hosting/">Firebase hosting</a>: add a <a href="https://firebase.google.com/docs/hosting/url-redirects-rewrites#section-rewrites">rewrite rule</a>.</p><code-example language="json" ng-version="9.0.0-rc.11"><div style="display:none">"rewrites": [ { "source": "**", "destination": "/index.html" } ]</div><aio-code><pre class="lang-json prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="str">"rewrites"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="str">"source"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"**"</span><span class="pun">,</span><span class="pln">
  </span><span class="str">"destination"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"/index.html"</span><span class="pln">
</span><span class="pun">}</span><span class="pln"> </span><span class="pun">]</span></code>
    </pre></aio-code></code-example></li></ul><a id="cors"></a><h3 id="requesting-services-from-a-different-server-cors" translation-result="on">请求来自另一个服务器的服务（CORS）<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deployment#requesting-services-from-a-different-server-cors"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="requesting-services-from-a-different-server-cors">Requesting services from a different server (CORS)<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deployment#requesting-services-from-a-different-server-cors"><i class="material-icons">link</i></a></h3><p translation-result="on">Angular 开发者在向与该应用的宿主服务器不同域的服务器发起请求时，可能会遇到一种<a href="https://en.wikipedia.org/wiki/Cross-origin_resource_sharing" target="_blank" title="Cross-origin resource sharing"><i>跨域资源共享（CORS）</i></a>错误。 浏览器会阻止该请求，除非得到那台服务器的明确许可。</p><p translation-origin="off">Angular developers may encounter a <a href="https://en.wikipedia.org/wiki/Cross-origin_resource_sharing" title="Cross-origin resource sharing"><i>cross-origin resource sharing</i></a> error when making a service request (typically a data service request) to a server other than the application's own host server. Browsers forbid such requests unless the server permits them explicitly.</p><p translation-result="on">客户端应用对这种错误无能为力。 服务器必须配置成可以接受来自该应用的请求。 要了解如何对特定的服务器开启 CORS，参见<a href="http://enable-cors.org/server.html" target="_blank" title="Enabling CORS server">enable-cors.org</a>。</p><p translation-origin="off">There isn't anything the client application can do about these errors. The server must be configured to accept the application's requests. Read about how to enable CORS for specific servers at <a href="http://enable-cors.org/server.html" title="Enabling CORS server">enable-cors.org</a>.</p><hr><a id="optimize"></a><h2 id="production-optimizations" translation-result="on">为生产环境优化<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deployment#production-optimizations"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="production-optimizations">Production optimizations<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deployment#production-optimizations"><i class="material-icons">link</i></a></h2><p translation-result="on"><code>--prod</code> 标志具有如下优化特性。</p><p translation-origin="off">The <code>--prod</code> <em>meta-flag</em> engages the following build optimization features.</p><ul><li><p translation-result="on"><a href="guide/aot-compiler">预先(AOT)编译</a>：预编译 Angular 的组件模板。</p><p translation-origin="off"><a href="guide/aot-compiler">Ahead-of-Time (AOT) Compilation</a>: pre-compiles Angular component templates.</p></li><li><p translation-result="on"><a href="guide/deployment#enable-prod-mode">生产模式</a>：部署到启用了<em>生产模式</em>的生产环境。</p><p translation-origin="off"><a href="guide/deployment#enable-prod-mode">Production mode</a>: deploys the production environment which enables <em>production mode</em>.</p></li><li><p translation-result="on">打包：把你的多个应用于库文件拼接到少量包（bundle）中。</p><p translation-origin="off">Bundling: concatenates your many application and library files into a few bundles.</p></li><li><p translation-result="on">最小化：删除多余的空格、注释和可选令牌。</p><p translation-origin="off">Minification: removes excess whitespace, comments, and optional tokens.</p></li><li><p translation-result="on">混淆/丑化：重写代码，使用简短的、不容易理解的变量名和函数名。</p><p translation-origin="off">Uglification: rewrites code to use short, cryptic variable and function names.</p></li><li><p translation-result="on">消除死代码：删除未引用过的模块和很多未用到的代码。</p><p translation-origin="off">Dead code elimination: removes unreferenced modules and much unused code.</p></li></ul><p translation-result="on">要了解关于 CLI 构建选项及其作用的更多知识，参见 <a href="cli/build"><code>ng build</code></a>。</p><p translation-origin="off">See <a href="cli/build"><code>ng build</code></a>for more about CLI build options and what they do.</p><a id="enable-prod-mode"></a><h3 id="enable-runtime-production-mode" translation-result="on">启用生产模式<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deployment#enable-runtime-production-mode"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="enable-runtime-production-mode">Enable runtime production mode<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deployment#enable-runtime-production-mode"><i class="material-icons">link</i></a></h3><p translation-result="on">除了构建期优化之外，Angular 还支持运行期生产模式。Angular 应用默认运行在开发模式下，你可以在浏览器的控制台中看到如下信息：</p><p translation-origin="off">In addition to build optimizations, Angular also has a runtime production mode. Angular apps run in development mode by default, as you can see by the following message on the browser console:</p><code-example format="nocode" ng-version="9.0.0-rc.11"><div style="display:none">Angular is running in the development mode. Call <a href="api/core/enableProdMode" class="code-anchor">enableProdMode</a>() to enable the production mode.</div><aio-code><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="typ">Angular</span><span class="pln"> </span><span class="kwd">is</span><span class="pln"> running </span><span class="kwd">in</span><span class="pln"> the development mode</span><span class="pun">.</span><span class="pln"> </span><span class="typ">Call</span><span class="pln"> </span><a href="api/core/enableProdMode" class="code-anchor"><span class="pln">enableProdMode</span></a><span class="pun">()</span><span class="pln"> to enable the production mode</span><span class="pun">.</span></code>
    </pre></aio-code></code-example><p translation-result="on">切换到<em>生产模式</em>可以通过禁用开发阶段特有的检查（比如双重变更检测周期）来让它运行得更快。</p><p translation-origin="off">Switching to <em>production mode</em> makes it run faster by disabling development specific checks such as the dual change detection cycles.</p><p translation-result="on">如果在构建时添加了 <code>--prod</code> 标识，也会同时启用<em>运行期生产模式</em>。</p><p translation-origin="off">When you enable production builds via <code>--prod</code> command line flag, the runtime production mode is enabled as well.</p><a id="lazy-loading"></a><h3 id="lazy-loading" translation-result="on">惰性加载<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deployment#lazy-loading"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="lazy-loading">Lazy loading<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deployment#lazy-loading"><i class="material-icons">link</i></a></h3><p translation-result="on">通过只加载应用启动时绝对必须的那些模块，你可以极大缩短应用启动的时间。</p><p translation-origin="off">You can dramatically reduce launch time by only loading the application modules that absolutely must be present when the app starts.</p><p translation-result="on">可以配置 Angular 的路由器，来推迟所有其它模块（及其相关代码）的加载时机，方法有<a href="guide/router#preloading" title="Preloading">一直等到应用启动完毕</a>，或者当用到时才按需<a href="guide/router#asynchronous-routing" title="Lazy loading"><em>惰性加载</em></a>。</p><p translation-origin="off">Configure the Angular Router to defer loading of all other modules (and their associated code), either by <a href="guide/router#preloading" title="Preloading">waiting until the app has launched</a> or by <a href="guide/router#asynchronous-routing" title="Lazy loading"><em>lazy loading</em></a> them on demand.</p><div class="callout is-helpful"><header translation-result="on">不要急性（eagerly）导入来自惰性加载模块中的任何东西</header><header translation-origin="off">Don't eagerly import something from a lazy-loaded module</header><p translation-result="on">如果要惰性加载某个模块，就要小心别在应用启动时要急性加载的模块（比如根模块 <code>AppModule</code>）中导入它。 如果那么做，该模块就会立刻加载起来。</p><p translation-origin="off">If you mean to lazy-load a module, be careful not import it in a file that's eagerly loaded when the app starts (such as the root <code>AppModule</code>). If you do that, the module will be loaded immediately.</p><p translation-result="on">配置打包方式时必须考虑惰性加载。 因为默认情况下惰性加载的模块没有在 JavaScript 中导入过，因此打包器默认会排除它们。 打包器不认识路由器配置，也就不能为惰性加载的模块创建独立的包。 你必须手动创建这些包。</p><p translation-origin="off">The bundling configuration must take lazy loading into consideration. Because lazy-loaded modules aren't imported in JavaScript, bundlers exclude them by default. Bundlers don't know about the router configuration and can't create separate bundles for lazy-loaded modules. You would have to create these bundles manually.</p><p translation-result="on">CLI 会运行 <a href="https://github.com/angular/angular-cli/tree/master/packages/ngtools/webpack">Angular Ahead-of-Time Webpack 插件</a>，它会自动识别出惰性加载的 <code>NgModules</code>，并为它们创建独立的包。</p><p translation-origin="off">The CLI runs the <a href="https://github.com/angular/angular-cli/tree/master/packages/ngtools/webpack">Angular Ahead-of-Time Webpack Plugin</a> which automatically recognizes lazy-loaded <code>NgModules</code> and creates separate bundles for them.</p></div><a id="measure"></a><h3 id="measure-performance" translation-result="on">测量性能<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deployment#measure-performance"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="measure-performance">Measure performance<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deployment#measure-performance"><i class="material-icons">link</i></a></h3><p translation-result="on">如果你对哪些东西拖慢了应用有更加清晰、精确的了解，就可以更好地决定优化什么以及如何优化。 慢的原因可能和你所想的不一样。 你可能花费了大量的时间和金钱来优化一些实际上无关紧要的东西，甚至可能让应用变得更慢。 你应该测量应用在运行环境中的实际行为，这才是最重要的。</p><p translation-origin="off">You can make better decisions about what to optimize and how when you have a clear and accurate understanding of what's making the application slow. The cause may not be what you think it is. You can waste a lot of time and money optimizing something that has no tangible benefit or even makes the app slower. You should measure the app's actual behavior when running in the environments that are important to you.</p><p translation-result="on"><a href="https://developers.google.com/web/tools/chrome-devtools/network-performance/understanding-resource-timing" title="Chrome DevTools Network Performance">Chrome DevTools 的网络和性能页</a>是你开始学习如何测量性能的好地方。</p><p translation-origin="off">The <a href="https://developers.google.com/web/tools/chrome-devtools/network-performance/understanding-resource-timing" title="Chrome DevTools Network Performance">Chrome DevTools Network Performance page</a> is a good place to start learning about measuring performance.</p><p translation-result="on"><a href="https://www.webpagetest.org/">WebPageTest</a>工具是另一个不错的选择，它还能帮你验证这次部署是否成功。</p><p translation-origin="off">The <a href="https://www.webpagetest.org/">WebPageTest</a> tool is another good choice that can also help verify that your deployment was successful.</p><a id="inspect-bundle"></a><h3 id="inspect-the-bundles" translation-result="on">检查发布包<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deployment#inspect-the-bundles"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="inspect-the-bundles">Inspect the bundles<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deployment#inspect-the-bundles"><i class="material-icons">link</i></a></h3><p translation-result="on"><a href="https://github.com/danvk/source-map-explorer/blob/master/README.md">source-map-explorer</a> 工具可以帮你在生产环境构建之后探查 JavaScript 包。</p><p translation-origin="off">The <a href="https://github.com/danvk/source-map-explorer/blob/master/README.md">source-map-explorer</a> tool is a great way to inspect the generated JavaScript bundles after a production build.</p><p translation-result="on">安装 <code>source-map-explorer</code>：</p><p translation-origin="off">Install <code>source-map-explorer</code>:</p><code-example language="none" class="code-shell" ng-version="9.0.0-rc.11"><div style="display:none">npm install source-map-explorer --save-dev</div><aio-code><pre class="lang-none prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">npm install source</span><span class="pun">-</span><span class="pln">map</span><span class="pun">-</span><span class="pln">explorer </span><span class="pun">--</span><span class="pln">save</span><span class="pun">-</span><span class="pln">dev</span></code>
    </pre></aio-code></code-example><p translation-result="on">为生产环境构建应用，包括源码映射表（source map）</p><p translation-origin="off">Build your app for production <em>including the source maps</em></p><code-example language="none" class="code-shell" ng-version="9.0.0-rc.11"><div style="display:none">ng build --prod --source-map</div><aio-code><pre class="lang-none prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">ng build </span><span class="pun">--</span><span class="pln">prod </span><span class="pun">--</span><span class="pln">source</span><span class="pun">-</span><span class="pln">map</span></code>
    </pre></aio-code></code-example><p translation-result="on">在 <code>dist/</code> 目录下列出生成的包。</p><p translation-origin="off">List the generated bundles in the <code>dist/</code> folder.</p><code-example language="none" class="code-shell" ng-version="9.0.0-rc.11"><div style="display:none">ls dist/*.bundle.js</div><aio-code><pre class="lang-none prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">ls dist</span><span class="com">/*.bundle.js</span></code>
    </pre></aio-code></code-example><p translation-result="on">运行浏览器来生成其中一个包的图形化表示。 下面的例子展示了 <code>main</code> 包的图表。</p><p translation-origin="off">Run the explorer to generate a graphical representation of one of the bundles. The following example displays the graph for the <em>main</em> bundle.</p><code-example language="none" class="code-shell" ng-version="9.0.0-rc.11"><div style="display:none">node_modules/.bin/source-map-explorer dist/main.*.bundle.js</div><aio-code><pre class="lang-none prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">node_modules</span><span class="pun">/.</span><span class="pln">bin</span><span class="pun">/</span><span class="pln">source</span><span class="pun">-</span><span class="pln">map</span><span class="pun">-</span><span class="pln">explorer dist</span><span class="pun">/</span><span class="pln">main</span><span class="pun">.*.</span><span class="pln">bundle</span><span class="pun">.</span><span class="pln">js</span></code>
    </pre></aio-code></code-example><p translation-result="on"><code>source-map-explorer</code> 会分析与包一起生成的 source map，并画出所有依赖的地图，精确展示哪些类包含在哪个包中。</p><p translation-origin="off">The <code>source-map-explorer</code> analyzes the source map generated with the bundle and draws a map of all dependencies, showing exactly which classes are included in the bundle.</p><p translation-result="on">下面是范例应用 <code>cli-quickstart</code> 中 <code>main</code> 包的输出。</p><p translation-origin="off">Here's the output for the <em>main</em> bundle of an example app called <code>cli-quickstart</code>.</p><div class="lightbox"><img src="generated/images/guide/deployment/quickstart-sourcemap-explorer.png" alt="quickstart sourcemap explorer" width="767" height="401"></div><a id="base-tag"></a><h2 id="the-base-tag" translation-result="on"><code>base</code> 标签<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deployment#the-base-tag"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="the-base-tag">The <code>base</code> tag<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deployment#the-base-tag"><i class="material-icons">link</i></a></h2><p translation-result="on">HTML 的 <a href="/guide/router"><em>&lt;base href="..."/&gt;</em></a> 标签指定了用于解析静态文件（如图片、脚本和样式表）相对地址的基地址。 比如，对于 <code>&lt;base href="/my/app/"&gt;</code>，浏览器就会把 <code>some/place/foo.jpg</code> 这样的 URL 解析成到 <code>my/app/some/place/foo.jpg</code> 的请求。 在导航期间，Angular 路由器使用 <em>base href</em> 作为到组件模板文件和模块文件的基地址。</p><p translation-origin="off">The HTML <a href="/guide/router"><em>&lt;base href="..."/&gt;</em></a> specifies a base path for resolving relative URLs to assets such as images, scripts, and style sheets. For example, given the <code>&lt;base href="/my/app/"&gt;</code>, the browser resolves a URL such as <code>some/place/foo.jpg</code> into a server request for <code>my/app/some/place/foo.jpg</code>. During navigation, the Angular router uses the <em>base href</em> as the base path to component, template, and module files.</p><div class="alert is-helpful"><p translation-result="on">另一种方式参见 <a href="api/common/APP_BASE_HREF" title="API: APP_BASE_HREF"><em>APP_BASE_HREF</em></a>。</p><p translation-origin="off">See also the <a href="api/common/APP_BASE_HREF" title="API: APP_BASE_HREF"><em>APP_BASE_HREF</em></a> alternative.</p></div><p translation-result="on">在开发期间，你通常会在存有 <code>index.html</code> 的目录下启动开发服务器。 那就是根目录，你要在 <code>index.html</code> 的顶部附近添加 <code>&lt;base href="/"&gt;</code>，因为 <code>/</code> 就是该应用的根路径。</p><p translation-origin="off">In development, you typically start the server in the folder that holds <code>index.html</code>. That's the root folder and you'd add <code>&lt;base href="/"&gt;</code> near the top of <code>index.html</code> because <code>/</code> is the root of the app.</p><p translation-result="on">但是在共享或生产服务器上，你可能会在子目录下启动服务器。 比如，当前应用的加载地址可能类似于 <code>http://www.mysite.com/my/app/</code>，这里的子目录就是 <code>my/app/</code>。所以你就要往服务端版本的 <code>index.html</code> 中添加 <code>&lt;base href="/my/app/"&gt;</code>。</p><p translation-origin="off">But on the shared or production server, you might serve the app from a subfolder. For example, when the URL to load the app is something like <code>http://www.mysite.com/my/app/</code>, the subfolder is <code>my/app/</code> and you should add <code>&lt;base href="/my/app/"&gt;</code> to the server version of the <code>index.html</code>.</p><p translation-result="on">这里如果不配置 <code>base</code> 标签，应用就会失败，并在浏览器的控制台中为缺失的文件显示一个 <code>404 - Not Found</code> 错误。看看它<em>试图</em>从哪里去查找那些文件，并据此调整 base 标签。</p><p translation-origin="off">When the <code>base</code> tag is mis-configured, the app fails to load and the browser console displays <code>404 - Not Found</code> errors for the missing files. Look at where it <em>tried</em> to find those files and adjust the base tag appropriately.</p><a id="differential-loading"></a><h2 id="differential-loading" translation-result="on">差异化加载<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deployment#differential-loading"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="differential-loading">Differential Loading<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deployment#differential-loading"><i class="material-icons">link</i></a></h2><p translation-result="on">在构建 Web 应用时，你肯定想确保你的应用与大多数浏览器兼容。JavaScript 在不断发展，新功能不断推出，不是所有浏览器都能以同样的进度实现这些新功能。</p><p translation-origin="off">When building web applications, you want to make sure your application is compatible with the majority of browsers. Even as JavaScript continues to evolve, with new features being introduced, not all browsers are updated with support for these new features at the same pace.</p><p translation-result="on">你在开发过程中使用 TypeScript 编写的代码会被编译并打包成 ES2015，这种 JavaScript 语法兼容大多数浏览器。 所有现代浏览器都支持 ES2015 和更新的版本，但是大多数情况下，你仍然要让用户能从不支持它的浏览器中访问你的应用。 当以老式浏览器为目标时，<a href="guide/browser-support#polyfills">腻子脚本（polyfills）</a>可以提供一些老式浏览器中不存在的功能，从而抹平这种差距。</p><p translation-origin="off">The code you write in development using TypeScript is compiled and bundled into ES2015, the JavaScript syntax that is compatible with most browsers. All modern browsers support ES2015 and beyond, but in most cases, you still have to account for users accessing your application from a browser that doesn't. When targeting older browsers, <a href="guide/browser-support#polyfills">polyfills</a> can bridge the gap by providing functionality that doesn't exist in the older versions of JavaScript supported by those browsers.</p><p translation-result="on">为了最大限度地提高兼容性，你可以发布一个包含所有已编译代码的发布包（bundle），以及所有可能会用到的腻子脚本。用户如果在支持大量最新 JavaScript 特性的现代浏览器中使用此应用，就不应该为这些他们用不到的包带来的额外体积付出代价。差异化加载就是解决这个问题的。Angular CLI 8 及更高版本默认就支持它。</p><p translation-origin="off">To maximize compatibility, you could ship a single bundle that includes all your compiled code, plus any polyfills that may be needed. Users with modern browsers, however, shouldn't have to pay the price of increased bundle size that comes with polyfills they don't need. Differential loading, which is supported by default in Angular CLI version 8 and higher, solves this problem.</p><p translation-result="on">差异化加载是一种策略，它能让你的应用支持多种浏览器，但是只加载当前浏览器必须用到的代码。 当（默认）启用了差异化加载时，CLI 会构建出两个单独的包，作为你要发布的应用的一部分。</p><p translation-origin="off">Differential loading is a strategy that allows your web application to support multiple browsers, but only load the necessary code that the browser needs. When differential loading is enabled (which is the default) the CLI builds two separate bundles as part of your deployed application.</p><ul><li><p translation-result="on">第一个包是使用现代的 ES2015 语法，它能发挥现代浏览器内置支持的优势，发布更少的腻子脚本，因此打包尺寸更小。</p><p translation-origin="off">The first bundle contains modern ES2015 syntax, takes advantage of built-in support in modern browsers, ships fewer polyfills, and results in a smaller bundle size.</p></li><li><p translation-result="on">第二个包使用老式的 ES5 语法，包含所有必要的腻子脚本。其打包尺寸更大，但是支持老式浏览器。</p><p translation-origin="off">The second bundle contains code in the old ES5 syntax, along with all necessary polyfills. This results in a larger bundle size, but supports older browsers.</p></li></ul><h3 id="differential-builds" translation-result="on">差异化构建<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deployment#differential-builds"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="differential-builds">Differential builds<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deployment#differential-builds"><i class="material-icons">link</i></a></h3><p translation-result="on">使用 Angular CLI 构建过程进行部署时，可以选择如何以及何时支持差异化加载。 <a href="cli/build"><code>ng build</code> CLI 命令</a>会查询浏览器配置和配置的构建目标，以确定是否需要支持旧版浏览器，以及该构建是否应产生用于差异化加载的必要捆绑包。</p><p translation-origin="off">When you deploy using the Angular CLI build process, you can choose how and when to support differential loading. The <a href="cli/build"><code>ng build</code> CLI command</a> queries the browser configuration and the configured build target to determine if support for legacy browsers is required, and whether the build should produce the necessary bundles used for differential loading.</p><p translation-result="on">会根据下列配置确定您的要求。</p><p translation-origin="off">The following configurations determine your requirements.</p><ul><li><p translation-result="on">浏览器列表</p><p translation-origin="off">Browsers list</p><p translation-result="on"><code>browserslist</code> 配置文件包含在应用的<a href="guide/file-structure#application-configuration-files">项目结构中</a>，它提供了本应用打算支持的最低浏览器版本。有关完整的配置选项，请参阅 <a href="https://github.com/browserslist/browserslist">Browserslist 规范</a> 。</p><p translation-origin="off">The <code>browserslist</code> configuration file is included in your application <a href="guide/file-structure#application-configuration-files">project structure</a> and provides the minimum browsers your application supports. See the <a href="https://github.com/browserslist/browserslist">Browserslist spec</a> for complete configuration options.</p></li><li><p translation-result="on">TypeScript 配置</p><p translation-origin="off">TypeScript configuration</p><p translation-result="on">在 TypeScript 的配置文件 <code>tsconfig.json</code> 中，<code>compilerOptions</code> 区的 <code><a href="api/router/RouterLinkWithHref#target" class="code-anchor">target</a></code> 选项会决定编译后代码的 ECMAScript 目标版本。现代浏览器原生支持 ES2015，而 ES5 则更常用于支持老式浏览器。</p><p translation-origin="off">In the TypeScript configuration file, <code>tsconfig.json</code>, the "target" option in the <code>compilerOptions</code> section determines the ECMAScript target version that the code is compiled to. Modern browsers support ES2015 natively, while ES5 is more commonly used to support legacy browsers.</p></li></ul><div class="alert is-helpful"><p translation-result="on">当前仅在将 <code>es2015</code> 用作编译目标时才支持差异化加载。当目标高于 <code>es2015</code> 时，构建过程将发出警告。</p><p translation-origin="off">Differential loading is currently only supported when using <code>es2015</code> as a compilation target. When used with targets higher than <code>es2015</code>, the build process emits a warning.</p></div><p translation-result="on">对于开发版本，由 <code>ng build</code> 生成的输出更简单且易于调试，从而减小您对编译代码的 sourcemaps 的依赖。</p><p translation-origin="off">For a development build, the output produced by <code>ng build</code> is simpler and easier to debug, allowing you to rely less on sourcemaps of compiled code.</p><p translation-result="on">对于生产版本，您的配置将决定创建哪些捆绑软件来部署您的应用程序。必要时，还会在构建过程中修改 <code>index.html</code> 文件，以包括启用差异化加载的脚本标签，如以下示例所示。</p><p translation-origin="off">For a production build, your configuration determines which bundles are created for deployment of your application. When needed, the <code>index.html</code> file is also modified during the build process to include script tags that enable differential loading, as shown in the following example.</p><code-example language="html" header="index.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;body&gt; &lt;app-root&gt;&lt;/app-root&gt; &lt;script src="runtime-es2015.js" type="module"&gt;&lt;/script&gt; &lt;script src="runtime-es5.js" nomodule&gt;&lt;/script&gt; &lt;script src="polyfills-es2015.js" type="module"&gt;&lt;/script&gt; &lt;script src="polyfills-es5.js" nomodule&gt;&lt;/script&gt; &lt;script src="styles-es2015.js" type="module"&gt;&lt;/script&gt; &lt;script src="styles-es5.js" nomodule&gt;&lt;/script&gt; &lt;script src="vendor-es2015.js" type="module"&gt;&lt;/script&gt; &lt;script src="vendor-es5.js" nomodule&gt;&lt;/script&gt; &lt;script src="main-es2015.js" type="module"&gt;&lt;/script&gt; &lt;script src="main-es5.js" nomodule&gt;&lt;/script&gt; &lt;/body&gt;</div><header class="ng-star-inserted">index.html</header><aio-code class="headed-code"><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from index.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;body&gt;</span><span class="pln">
  </span><span class="tag">&lt;app-root&gt;&lt;/app-root&gt;</span><span class="pln">
  </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"runtime-es2015.js"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"module"</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln">
  </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"runtime-es5.js"</span><span class="pln"> </span><span class="atn">nomodule</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln">
  </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"polyfills-es2015.js"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"module"</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln">
  </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"polyfills-es5.js"</span><span class="pln"> </span><span class="atn">nomodule</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln">
  </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"styles-es2015.js"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"module"</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln">
  </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"styles-es5.js"</span><span class="pln"> </span><span class="atn">nomodule</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln">
  </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"vendor-es2015.js"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"module"</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln">
  </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"vendor-es5.js"</span><span class="pln"> </span><span class="atn">nomodule</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln">
  </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"main-es2015.js"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"module"</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln">
  </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"main-es5.js"</span><span class="pln"> </span><span class="atn">nomodule</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln">
</span><span class="tag">&lt;/body&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">每个 script 标签都有一个 <code>type="module"</code> 或 <code>nomodule</code> 属性。原生支持 ES 模块的浏览器只会加载带有该类型属性的脚本，而忽略那些带有 <code>nomodule</code> 属性的脚本。而老式浏览器只会加载带有<code>nomodule</code>属性的脚本，而忽略那些 type 为 <code>module</code> 的脚本标签。</p><p translation-origin="off">Each script tag has a <code>type="module"</code> or <code>nomodule</code> attribute. Browsers with native support for ES modules only load the scripts with the <code>module</code> type attribute and ignore scripts with the <code>nomodule</code> attribute. Legacy browsers only load the scripts with the <code>nomodule</code> attribute, and ignore the script tags with the <code>module</code> type that load ES modules.</p><div class="alert is-helpful"><p translation-result="on">一些旧版浏览器仍会下载两个捆绑包，但只会根据上述属性执行适当的脚本。您可以在<a href="https://github.com/philipwalton/webpack-esnext-boilerplate/issues/1">此处</a>阅读有关此问题的更多<a href="https://github.com/philipwalton/webpack-esnext-boilerplate/issues/1">信息</a> 。</p><p translation-origin="off">Some legacy browsers still download both bundles, but only execute the appropriate scripts based on the attributes mentioned above. You can read more on the issue <a href="https://github.com/philipwalton/webpack-esnext-boilerplate/issues/1">here</a>.</p></div><h3 id="configuring-differential-loading" translation-result="on">配置差异化加载<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deployment#configuring-differential-loading"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="configuring-differential-loading">Configuring differential loading<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deployment#configuring-differential-loading"><i class="material-icons">link</i></a></h3><p translation-result="on">Angular CLI 第 8 版及更高版本已默认支持构建差异化加载的发布包。工作空间中的每个应用项目，都可以根据其中的 <code>browserslist</code> 和 <code>tsconfig.json</code> 配置文件来决定发布包的构建方式。</p><p translation-origin="off">Differential loading is supported by default with version 8 and later of the Angular CLI. For each application project in your workspace, you can configure how builds are produced based on the <code>browserslist</code> and <code>tsconfig.json</code> configuration files in your application project.</p><p translation-result="on">对于新创建的 Angular 应用程序，将忽略 IE 9-11 等旧版浏览器，并且编译目标为 ES2015。</p><p translation-origin="off">For a newly created Angular application, legacy browsers such as IE 9-11 are ignored, and the compilation target is ES2015.</p><code-example language="none" header="browserslist" ng-version="9.0.0-rc.11"><div style="display:none">&gt; 0.5% last 2 versions Firefox ESR not dead not IE 9-11 # For IE 9-11 support, remove 'not'.</div><header class="ng-star-inserted">browserslist</header><aio-code class="headed-code"><pre class="lang-none prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from browserslist">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pun">&gt;</span><span class="pln"> </span><span class="lit">0.5</span><span class="pun">%</span><span class="pln">
</span><span class="kwd">last</span><span class="pln"> </span><span class="lit">2</span><span class="pln"> versions
</span><span class="typ">Firefox</span><span class="pln"> ESR
</span><span class="kwd">not</span><span class="pln"> dead
</span><span class="kwd">not</span><span class="pln"> IE </span><span class="lit">9</span><span class="pun">-</span><span class="lit">11</span><span class="pln"> </span><span class="com"># For IE 9-11 support, remove 'not'.</span></code>
    </pre></aio-code></code-example><code-example language="json" header="tsconfig.json" ng-version="9.0.0-rc.11"><div style="display:none">{ "compileOnSave": false, "compilerOptions": { "baseUrl": "./", "outDir": "./dist/out-tsc", "sourceMap": true, "declaration": false, "module": "esnext", "moduleResolution": "node", "emitDecoratorMetadata": true, "experimentalDecorators": true, "importHelpers": true, "target": "es2015", "typeRoots": [ "node_modules/@types" ], "lib": [ "es2018", "dom" ] } }</div><header class="ng-star-inserted">tsconfig.json</header><aio-code class="headed-code"><pre class="lang-json prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from tsconfig.json">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pun">{</span><span class="pln">
  </span><span class="str">"compileOnSave"</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">,</span><span class="pln">
  </span><span class="str">"compilerOptions"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="str">"baseUrl"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"./"</span><span class="pun">,</span><span class="pln">
    </span><span class="str">"outDir"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"./dist/out-tsc"</span><span class="pun">,</span><span class="pln">
    </span><span class="str">"sourceMap"</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span><span class="pln">
    </span><span class="str">"declaration"</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">,</span><span class="pln">
    </span><span class="str">"module"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"esnext"</span><span class="pun">,</span><span class="pln">
    </span><span class="str">"moduleResolution"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"node"</span><span class="pun">,</span><span class="pln">
    </span><span class="str">"emitDecoratorMetadata"</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span><span class="pln">
    </span><span class="str">"experimentalDecorators"</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span><span class="pln">
    </span><span class="str">"importHelpers"</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span><span class="pln">
    </span><span class="str">"target"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"es2015"</span><span class="pun">,</span><span class="pln">
    </span><span class="str">"typeRoots"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
      </span><span class="str">"node_modules/@types"</span><span class="pln">
    </span><span class="pun">],</span><span class="pln">
    </span><span class="str">"lib"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
      </span><span class="str">"es2018"</span><span class="pun">,</span><span class="pln">
      </span><span class="str">"dom"</span><span class="pln">
    </span><span class="pun">]</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on">默认配置将创建两个版本，并启用差异化加载。</p><p translation-origin="off">The default configuration creates two builds, with differential loading enabled.</p><div class="alert is-important"><p translation-result="on">要查看这种默认配置支持哪些浏览器，以及决定哪些设置适合你要支持的浏览器，请参阅“ <a href="https://browserl.ist/?q=%3E+0.5%25%2C+last+2+versions%2C+Firefox+ESR%2C+Chrome+41%2C+not+dead%2C+not+IE+9-11">浏览器列表兼容性”页面</a> 。</p><p translation-origin="off">To see which browsers are supported with the default configuration and determine which settings meet to your browser support requirements, see the <a href="https://browserl.ist/?q=%3E+0.5%25%2C+last+2+versions%2C+Firefox+ESR%2C+not+dead%2C+not+IE+9-11">Browserslist compatibility page</a>.</p></div><p translation-result="on"><code>browserslist</code> 配置允许您忽略不支持 ES2015 的浏览器。在这种情况下，将只生成一个版本。</p><p translation-origin="off">The <code>browserslist</code> configuration allows you to ignore browsers without ES2015 support. In this case, a single build is produced.</p><p translation-result="on">如果您的 <code>browserslist</code> 配置包括对所有旧版浏览器的支持，则 TypeScript 配置中的构建目标将确定该构建是否将支持差异化加载。</p><p translation-origin="off">If your <code>browserslist</code> configuration includes support for any legacy browsers, the build target in the TypeScript configuration determines whether the build will support differential loading.</p><a id="configuration-table"></a><table><thead><tr><th><p translation-result="on">浏览器列表</p><p translation-origin="off">browserslist</p></th><th><p translation-result="on">ES 目标</p><p translation-origin="off">ES target</p></th><th><p translation-result="on">构建结果</p><p translation-origin="off">Build result</p></th></tr></thead><tbody><tr><td><p translation-result="on">禁用 ES5 支持</p><p translation-origin="off">ES5 support disabled</p></td><td>es2015</td><td><p translation-result="on">单一构建，不行可 ES5</p><p translation-origin="off">Single build, ES5 not required</p></td></tr><tr><td><p translation-result="on">启用 ES5 支持</p><p translation-origin="off">ES5 support enabled</p></td><td>es5</td><td><p translation-result="on">单一构建，按需附带只供 ES5 使用的腻子脚本</p><p translation-origin="off">Single build w/conditional polyfills for ES5 only</p></td></tr><tr><td><p translation-result="on">启用 ES5 支持</p><p translation-origin="off">ES5 support enabled</p></td><td>es2015</td><td><p translation-result="on">差异化加载（两个构建，按需附带腻子脚本）</p><p translation-origin="off">Differential loading (two builds w/conditional polyfills)</p></td></tr></tbody></table><h3 id="opting-out-of-differential-loading" translation-result="on">选择性地排除差异化加载<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deployment#opting-out-of-differential-loading"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="opting-out-of-differential-loading">Opting out of differential loading<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deployment#opting-out-of-differential-loading"><i class="material-icons">link</i></a></h3><p translation-result="on">如果差异化加载导致了意外问题，或者您需要专门针对旧版浏览器支持而将 ES5 作为目标，则可以显式禁用差异化加载。</p><p translation-origin="off">Differential loading can be explicitly disabled if it causes unexpected issues, or if you need to target ES5 specifically for legacy browser support.</p><p translation-result="on">要显式禁用差异化加载并创建 ES5 版本，请执行以下操作：</p><p translation-origin="off">To explicitly disable differential loading and create an ES5 build:</p><ul><li><p translation-result="on">在 <code>browserslist</code> 配置文件中通过移除前面的 <code>not</code> 关键字来启用 <code>dead</code> 或 <code>IE</code> 中的浏览器。</p><p translation-origin="off">Enable the <code>dead</code> or <code>IE</code> browsers in the <code>browserslist</code> configuration file by removing the <code>not</code> keyword in front of them.</p></li></ul><ul><li><p translation-result="on">要创建一个单一的 ES5 的构建，把 <code>compilerOptions</code> 中的 <code><a href="api/router/RouterLinkWithHref#target" class="code-anchor">target</a></code> 设为 <code>es5</code> 。</p><p translation-origin="off">To create a single ES5 build, set the target in the <code>compilerOptions</code> to <code>es5</code>.</p></li></ul><a id="test-and-serve"></a><h2 id="local-development-in-older-browsers" translation-result="on">旧版浏览器中的本地开发<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deployment#local-development-in-older-browsers"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="local-development-in-older-browsers">Local development in older browsers<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deployment#local-development-in-older-browsers"><i class="material-icons">link</i></a></h2><p translation-result="on">在 Angular CLI 版本 8 和更高版本中，默认情况下会为 <code>ng build</code> 命令启用差异化加载。但是，<code>ng serve</code>，<code>ng test</code>和 <code>ng e2e</code> 命令只会生成一个 ES2015 版本，该版本无法在不支持该模块的旧版浏览器（例如 IE 11）中运行。</p><p translation-origin="off">In Angular CLI version 8 and higher, differential loading is enabled by default for the <code>ng build</code> command. The <code>ng serve</code>, <code>ng test</code>, and <code>ng e2e</code> commands, however, generate a single ES2015 build which cannot run in older browsers that don't support the modules, such as IE 11.</p><p translation-result="on">如果要在开发期间运行 ES5 代码，则可以完全禁用差异化加载。但是，为了保持差异化加载的好处，更好的选择是为 <code>ng serve</code> ，<code>ng e2e</code> 和 <code>ng test</code> 定义多个配置。</p><p translation-origin="off">If you want to run ES5 code during development, you could disable differential loading completely. To maintain the benefits of differential loading, however, a better option is to define multiple configurations for <code>ng serve</code>, <code>ng e2e</code>, and <code>ng test</code>.</p><a id="differential-serve"></a><h3 id="configuring-serve-for-es5" translation-result="on">为 ES5 配置服务<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deployment#configuring-serve-for-es5"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="configuring-serve-for-es5">Configuring serve for ES5<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deployment#configuring-serve-for-es5"><i class="material-icons">link</i></a></h3><p translation-result="on">要让 <code>ng serve</code> 做到这一点，就要在 <code>tsconfig.app.json</code> 后面创建一个新的文件 <code>tsconfig-es5.app.json</code>，包含以下内容。</p><p translation-origin="off">To do this for <code>ng serve</code>, create a new file, <code>tsconfig-es5.app.json</code> next to <code>tsconfig.app.json</code> with the following content.</p><code-example language="json" ng-version="9.0.0-rc.11"><div style="display:none">{ "extends": "./tsconfig.app.json", "compilerOptions": { "target": "es5" } }</div><aio-code><pre class="lang-json prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pun">{</span><span class="pln">
 </span><span class="str">"extends"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"./tsconfig.app.json"</span><span class="pun">,</span><span class="pln">
 </span><span class="str">"compilerOptions"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
     </span><span class="str">"target"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"es5"</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on">在 <code>angular.json</code> 中，在 <code>build</code> 和 <code>serve</code> 下添加两个新的配置节，其目标指向新的 TypeScript 配置。</p><p translation-origin="off">In <code>angular.json</code> add two new configuration sections under the <code>build</code> and <code>serve</code> targets to point to the new TypeScript configuration.</p><code-example language="json" ng-version="9.0.0-rc.11"><div style="display:none">"build": { "builder": "@angular-devkit/build-angular:browser", "options": { ... }, "configurations": { "production": { ... }, "es5": { "tsConfig": "./tsconfig-es5.app.json" } } }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { ... }, "configurations": { "production": { ... }, "es5": { "browserTarget": "&lt;app-name&gt;:build:es5" } } },</div><aio-code><pre class="lang-json prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="str">"build"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="str">"builder"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"@angular-devkit/build-angular:browser"</span><span class="pun">,</span><span class="pln">
  </span><span class="str">"options"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
      </span><span class="pun">...</span><span class="pln">
  </span><span class="pun">},</span><span class="pln">
  </span><span class="str">"configurations"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="str">"production"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        </span><span class="pun">...</span><span class="pln">
    </span><span class="pun">},</span><span class="pln">
    </span><span class="str">"es5"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
      </span><span class="str">"tsConfig"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"./tsconfig-es5.app.json"</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">},</span><span class="pln">
</span><span class="str">"serve"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="str">"builder"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"@angular-devkit/build-angular:dev-server"</span><span class="pun">,</span><span class="pln">
  </span><span class="str">"options"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
      </span><span class="pun">...</span><span class="pln">
  </span><span class="pun">},</span><span class="pln">
  </span><span class="str">"configurations"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="str">"production"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
     </span><span class="pun">...</span><span class="pln">
    </span><span class="pun">},</span><span class="pln">
    </span><span class="str">"es5"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
      </span><span class="str">"browserTarget"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"&lt;app-name&gt;:build:es5"</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">},</span></code>
    </pre></aio-code></code-example><p translation-result="on">然后，您可以使用此配置运行 <code>ng serve</code> 命令。务必确保将 <code>&lt;app-name&gt;</code>（在<code>"&lt;app-name&gt;:build:es5"</code> 中）替换为应用程序的实际名称，因为它也会出现在 <code>angular.json</code> 的 <code>projects</code> 中。例如，如果您的应用程序名称为 <code>myAngularApp</code> 则配置要变成 <code>"browserTarget": "myAngularApp:build:es5"</code>。</p><p translation-origin="off">You can then run the <code>ng serve</code> command with this configuration. Make sure to replace <code>&lt;app-name&gt;</code> (in <code>"&lt;app-name&gt;:build:es5"</code>) with the actual name of the app, as it appears under <code>projects</code> in <code>angular.json</code>. For example, if your app name is <code>myAngularApp</code> the config will become <code>"browserTarget": "myAngularApp:build:es5"</code>.</p><code-example language="none" class="code-shell" ng-version="9.0.0-rc.11"><div style="display:none">ng serve --configuration es5</div><aio-code><pre class="lang-none prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">ng serve </span><span class="pun">--</span><span class="pln">configuration es5</span></code>
    </pre></aio-code></code-example><a id="differential-test"></a><h3 id="configuring-the-test-command" translation-result="on">配置 <code>test</code> 命令<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deployment#configuring-the-test-command"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="configuring-the-test-command">Configuring the test command<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deployment#configuring-the-test-command"><i class="material-icons">link</i></a></h3><p translation-result="on">创建一个新的文件，在 <code>tsconfig.spec.json</code> 后面 <code>tsconfig-es5.spec.json</code>，包含以下内容。</p><p translation-origin="off">Create a new file, <code>tsconfig-es5.spec.json</code> next to <code>tsconfig.spec.json</code> with the following content.</p><code-example language="json" ng-version="9.0.0-rc.11"><div style="display:none">{ "extends": "./tsconfig.spec.json", "compilerOptions": { "target": "es5" } }</div><aio-code><pre class="lang-json prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pun">{</span><span class="pln">
 </span><span class="str">"extends"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"./tsconfig.spec.json"</span><span class="pun">,</span><span class="pln">
 </span><span class="str">"compilerOptions"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
     </span><span class="str">"target"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"es5"</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><code-example language="json" ng-version="9.0.0-rc.11"><div style="display:none">"test": { "builder": "@angular-devkit/build-angular:karma", "options": { ... }, "configurations": { "es5": { "tsConfig": "./tsconfig-es5.spec.json" } } },</div><aio-code><pre class="lang-json prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="str">"test"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="str">"builder"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"@angular-devkit/build-angular:karma"</span><span class="pun">,</span><span class="pln">
  </span><span class="str">"options"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
      </span><span class="pun">...</span><span class="pln">
  </span><span class="pun">},</span><span class="pln">
  </span><span class="str">"configurations"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="str">"es5"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
      </span><span class="str">"tsConfig"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"./tsconfig-es5.spec.json"</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">},</span></code>
    </pre></aio-code></code-example><p translation-result="on">然后，您可以使用此配置运行测试了</p><p translation-origin="off">You can then run the tests with this configuration</p><code-example language="none" class="code-shell" ng-version="9.0.0-rc.11"><div style="display:none">ng test --configuration es5</div><aio-code><pre class="lang-none prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">ng test </span><span class="pun">--</span><span class="pln">configuration es5</span></code>
    </pre></aio-code></code-example><h3 id="configuring-the-e2e-command" translation-result="on">配置 <code>e2e</code> 命令<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deployment#configuring-the-e2e-command"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="configuring-the-e2e-command">Configuring the e2e command<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/deployment#configuring-the-e2e-command"><i class="material-icons">link</i></a></h3><p translation-result="on">如上所述创建 <a href="guide/deployment#configuring-serve-for-es5">ES5 serve 配置</a> ，并为 E2E 目标配置上 ES5 配置。</p><p translation-origin="off">Create an <a href="guide/deployment#configuring-serve-for-es5">ES5 serve configuration</a> as explained above, and configuration an ES5 configuration for the E2E target.</p><code-example language="json" ng-version="9.0.0-rc.11"><div style="display:none">"e2e": { "builder": "@angular-devkit/build-angular:protractor", "options": { ... }, "configurations": { "production": { ... }, "es5": { "devServerTarget": "&lt;app-name&gt;:serve:es5" } } },</div><aio-code><pre class="lang-json prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="str">"e2e"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="str">"builder"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"@angular-devkit/build-angular:protractor"</span><span class="pun">,</span><span class="pln">
  </span><span class="str">"options"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
      </span><span class="pun">...</span><span class="pln">
  </span><span class="pun">},</span><span class="pln">
  </span><span class="str">"configurations"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
	  </span><span class="str">"production"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
		  </span><span class="pun">...</span><span class="pln">
	  </span><span class="pun">},</span><span class="pln">
    </span><span class="str">"es5"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
      </span><span class="str">"devServerTarget"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"&lt;app-name&gt;:serve:es5"</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">},</span></code>
    </pre></aio-code></code-example><p translation-result="on">然后，您就可以使用此配置运行 <code>ng e2e</code> 命令了。务必确保将 <code>&lt;app-name&gt;</code>（在<code>"&lt;app-name&gt;:serve:es5"</code> 中）替换为应用程序的实际名称，因为它也出现在 <code>angular.json</code> 的 <code>projects</code>中。例如，如果您的应用程序名称为 <code>myAngularApp</code> 则配置要变成 <code>"devServerTarget": "myAngularApp:serve:es5"</code> 。</p><p translation-origin="off">You can then run the <code>ng e2e</code> command with this configuration. Make sure to replace <code>&lt;app-name&gt;</code> (in <code>"&lt;app-name&gt;:serve:es5"</code>) with the actual name of the app, as it appears under <code>projects</code> in <code>angular.json</code>. For example, if your app name is <code>myAngularApp</code> the config will become <code>"devServerTarget": "myAngularApp:serve:es5"</code>.</p><code-example language="none" class="code-shell" ng-version="9.0.0-rc.11"><div style="display:none">ng e2e --configuration es5</div><aio-code><pre class="lang-none prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">ng e2e </span><span class="pun">--</span><span class="pln">configuration es5</span></code>
    </pre></aio-code></code-example></div></div></aio-doc-viewer></main></mat-sidenav-content></mat-sidenav-container><div class="toc-container no-print ng-star-inserted"><aio-lazy-ce selector="aio-toc"><aio-toc ng-version="9.0.0-rc.11"><div class="toc-inner no-print collapsed ng-star-inserted"><ul class="toc-list"><li class="h1 ng-star-inserted active" title="部署"><a href="guide/deployment#deployment">部署</a></li><li class="h2 ng-star-inserted" title="最简单的部署选项"><a href="guide/deployment#simple-deployment-options">最简单的部署选项</a></li><li class="h3 ng-star-inserted" title="从磁盘构建和提供服务"><a href="guide/deployment#building-and-serving-from-disk">从磁盘构建和提供服务</a></li><li class="h3 ng-star-inserted" title="使用 CLI 进行自动部署"><a href="guide/deployment#automatic-deployment-with-the-cli">使用 CLI 进行自动部署</a></li><li class="h3 ng-star-inserted" title="最简化的部署方式"><a href="guide/deployment#basic-deployment-to-a-remote-server">最简化的部署方式</a></li><li class="h3 ng-star-inserted" title="发布到 GitHub pages（页面服务）"><a href="guide/deployment#deploy-to-github-pages">发布到 GitHub pages（页面服务）</a></li><li class="h2 ng-star-inserted" title="服务端配置"><a href="guide/deployment#server-configuration">服务端配置</a></li><li class="h3 ng-star-inserted" title="带路由的应用必须以 index.html 作为后备页面"><a href="guide/deployment#routed-apps-must-fallback-to-indexhtml">带路由的应用必须以 <code>index.html</code> 作为后备页面</a></li><li class="h3 ng-star-inserted" title="请求来自另一个服务器的服务（CORS）"><a href="guide/deployment#requesting-services-from-a-different-server-cors">请求来自另一个服务器的服务（CORS）</a></li><li class="h2 ng-star-inserted" title="为生产环境优化"><a href="guide/deployment#production-optimizations">为生产环境优化</a></li><li class="h3 ng-star-inserted" title="启用生产模式"><a href="guide/deployment#enable-runtime-production-mode">启用生产模式</a></li><li class="h3 ng-star-inserted" title="惰性加载"><a href="guide/deployment#lazy-loading">惰性加载</a></li><li class="h3 ng-star-inserted" title="测量性能"><a href="guide/deployment#measure-performance">测量性能</a></li><li class="h3 ng-star-inserted" title="检查发布包"><a href="guide/deployment#inspect-the-bundles">检查发布包</a></li><li class="h2 ng-star-inserted" title="base 标签"><a href="guide/deployment#the-base-tag"><code>base</code> 标签</a></li><li class="h2 ng-star-inserted" title="差异化加载"><a href="guide/deployment#differential-loading">差异化加载</a></li><li class="h3 ng-star-inserted" title="差异化构建"><a href="guide/deployment#differential-builds">差异化构建</a></li><li class="h3 ng-star-inserted" title="配置差异化加载"><a href="guide/deployment#configuring-differential-loading">配置差异化加载</a></li><li class="h3 ng-star-inserted" title="选择性地排除差异化加载"><a href="guide/deployment#opting-out-of-differential-loading">选择性地排除差异化加载</a></li><li class="h2 ng-star-inserted" title="旧版浏览器中的本地开发"><a href="guide/deployment#local-development-in-older-browsers">旧版浏览器中的本地开发</a></li><li class="h3 ng-star-inserted" title="为 ES5 配置服务"><a href="guide/deployment#configuring-serve-for-es5">为 ES5 配置服务</a></li><li class="h3 ng-star-inserted" title="配置 test 命令"><a href="guide/deployment#configuring-the-test-command">配置 <code>test</code> 命令</a></li><li class="h3 ng-star-inserted" title="配置 e2e 命令"><a href="guide/deployment#configuring-the-e2e-command">配置 <code>e2e</code> 命令</a></li></ul></div></aio-toc></aio-lazy-ce></div><footer class="no-print"><aio-footer><div class="grid-fluid"><div class="footer-block ng-star-inserted"><h3>资源</h3><ul><li class="ng-star-inserted"><a class="link" href="about" title="Angular 贡献者。">关于</a></li><li class="ng-star-inserted"><a class="link" href="resources" title="网络上的 Angular 工具、培训、博客等">资源列表</a></li><li class="ng-star-inserted"><a class="link" href="presskit" title="我们的联系方式、LOGO 和品牌">宣传资料</a></li><li class="ng-star-inserted"><a class="link" href="https://blog.angular.io/" title="Angular 官方博客">博客</a></li><li class="ng-star-inserted"><a class="link" href="analytics" title="Angular 使用情况分析">使用情况分析</a></li></ul></div><div class="footer-block ng-star-inserted"><h3>帮助</h3><ul><li class="ng-star-inserted"><a class="link" href="https://stackoverflow.com/questions/tagged/angular" title="Stack Overflow: 这里的社区会回答你关于 Angular 的技术问题">Stack Overflow</a></li><li class="ng-star-inserted"><a class="link" href="https://gitter.im/angular/angular" title="和老鸟聊 Angular">Gitter</a></li><li class="ng-star-inserted"><a class="link" href="https://github.com/angular/angular/issues" title="在 github 上报告问题和建议。">报告问题</a></li><li class="ng-star-inserted"><a class="link" href="https://github.com/angular/code-of-conduct/blob/master/CODE_OF_CONDUCT.md" title="让我们彼此尊重">行为规范</a></li></ul></div><div class="footer-block ng-star-inserted"><h3>社区</h3><ul><li class="ng-star-inserted"><a class="link" href="events" title="Angular events around the world.">活动</a></li><li class="ng-star-inserted"><a class="link" href="http://www.meetup.com/topics/angularjs/" title="参加聚会，向别的开发人员学习">聚会</a></li><li class="ng-star-inserted"><a class="link" href="https://twitter.com/angular" title="Twitter">Twitter</a></li><li class="ng-star-inserted"><a class="link" href="https://github.com/angular/angular" title="GitHub">GitHub</a></li><li class="ng-star-inserted"><a class="link" href="contribute" title="向 Angular 做贡献">做贡献</a></li></ul></div><div class="footer-block ng-star-inserted"><h3>多语言</h3><ul><li class="ng-star-inserted"><a class="link" href="https://angular.io/" title="English Version.">English Version</a></li><li class="ng-star-inserted"><a class="link" href="https://angular.tw/" title="正體中文版">正體中文版</a></li><li class="ng-star-inserted"><a class="link" href="https://angular.jp/" title="日本語版">日本語版</a></li><li class="ng-star-inserted"><a class="link" href="https://angular.kr/" title="한국어">한국어</a></li></ul></div></div><p>Super-powered by Google ©2010-2020. 代码授权方式：<a href="license" title="License text">MIT-style License</a>. 文档授权方式：<a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.</p><p>当前版本：9.0.1-build.109+sha.7a49faba.</p></aio-footer></footer><div class="cdk-visually-hidden ng-star-inserted"><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color" aria-hidden="true">&nbsp;</mat-icon></div></aio-shell><noscript><div class="background-sky hero"></div><section id="intro" style="text-shadow:1px 1px #1976d2"><div class="hero-logo"><img src="assets/images/logos/angular/angular.svg" width="250" height="250" alt="Angular"></div><div class="homepage-container"><div class="hero-headline">一套框架，多种平台<br>移动 &amp; 桌面</div></div></section><h2 style="color:red;margin-top:40px;position:relative;text-align:center;text-shadow:1px 1px #fafafa"><b><i>该网站需要浏览器支持 JavaScript</i></b></h2></noscript><script src="runtime-es2015.811b066977719df5af39.js" type="module"></script><script src="runtime-es5.811b066977719df5af39.js" nomodule="" defer=""></script><script src="polyfills-es5.1494ca908613f3429457.js" nomodule="" defer=""></script><script src="polyfills-es2015.9057a05c650bf60ecbf4.js" type="module"></script><script src="main-es2015.4e9aa34b562bab1382ab.js" type="module"></script><script src="main-es5.4e9aa34b562bab1382ab.js" nomodule="" defer=""></script><div class="cdk-live-announcer-element cdk-visually-hidden" aria-atomic="true" aria-live="polite"></div></body></html>